Esiste un selettore CSS per elementi contenenti determinati testo?

I selettori CSS selezionano gli elementi HTML per applicare le proprietà di styling. Questi sono utilizzati per trovare gli elementi che vuoi modellare. Esistono alcune categorie di selettori CSS, come pseudo-Classe, selettori semplici e altri. Più specificamente, il selettore degli attributi è l'opzione migliore per selezionare l'elemento con testo definito. Il selettore del combinatori può anche essere applicato per questo scopo.

Questo articolo dimostrerà i seguenti metodi:

• Metodo 1: selezione dell'elemento contenente determinati testo usando il selettore degli attributi CSS
• Metodo 2: selezione dell'elemento contenente determinati testo usando il selettore di fratelli Generale CSS

Metodo 1: selezione dell'elemento contenente determinati testo usando il selettore degli attributi CSS

Il selettore degli attributi CSS "CSS [Attributo ~ = "Value"] Selettore"Può aiutare a selezionare l'elemento con testo definito.

Sintassi

Comprendiamo la sintassi del selettore degli attributi CSS:

[attributo-name ~ = value]

// Dichiarazioni CSS

Qui:

• "nome attributo": Attributo utilizzato nell'elemento HTML con determinati testo è qui specificato.
• "~": Questo simbolo è un combinatori di fratelli generali. Viene utilizzato per scegliere ogni elemento che è il prossimo fratello di un determinato elemento.
• "valore": Indica il valore dell'attributo.

Esempio

Nel file HTML, seguire le istruzioni elencate:

• Innanzitutto, aggiungi il “"Elemento e assegnare una classe"Articoli-Div".
• Aggiungi il "

  ","

  ", E "

  "Elementi all'interno del div.

• IL "

  " E "

  "Regola le intestazioni sulla pagina. IL "

  "L'intestazione è leggermente più piccola di"

  "Elemento.

• IL "

  "L'elemento specifica il contenuto di testo nella pagina:

Linuxhint

Cose stazionarie

libro

matita

bloc notes

libro

Modeliamo il div "Articoli-Div"E l'intestazione"

"Applicando le proprietà CSS come indicato di seguito. Successivamente, vedremo come selezionare il "

"Testo di Element usando i selettori degli attributi CSS.

Classe "oggetti-div" stile

Le seguenti proprietà CSS sono applicate al "Articoli-Div" classe:

.elementi div
Testo-align: centro;
Font-size: 17px;
Font-Family: 'Trebuchet MS';

Qui:

• "allineamento"Determina l'allineamento del testo.
• "dimensione del font"Regola la dimensione del carattere dell'elemento.
• "famiglia di font"Scegli lo stile del carattere dell'elemento.

Elemento "H2" di stile

"H2"È anche noto come selettore degli elementi. È usato per modellare il “

"Elemento con le seguenti proprietà:

H2
Font-size: 30px;
Spazio di lettere: 0.2em;
Colore: RGB (182, 14, 238);

Nel blocco sopra:

• "spaziatura del carattere"Regola la spaziatura tra i caratteri dell'elemento.
• "colore"Assegna il colore al testo.
• "dimensione del font"La proprietà è definita nella sezione sopra.

Seleziona il testo "libro"

Per selezionare un particolare testo dal documento, non esiste un selettore specifico. L'attributo dell'elemento deve solo essere specificato. Quindi, con l'aiuto del valore dell'attributo, possiamo selezionare il testo in CSS:

[stazionario ~ = "libro"]
Background-color: CornflowerBlue;

Qui, in CSS, il "colore di sfondo"La proprietà viene regolata nel testo specificando l'attributo"stazionario"Avere valore"libro".

L'output seguente mostra che tutti gli elementi hanno il valore dell'attributo "libro"Sono in stile:

Ora, controlliamo l'esempio per applicare gli stili al "matita" testo. A tale scopo, l'attributo stazionario con il valore "matita"È recuperato in CSS attraverso il selettore degli attributi:

[stazionario ~ = matita]
Background-color: RGB (240, 168, 234);
imbottitura: 5px;

Qui:

• "colore di sfondo"Ha specificato il colore dello sfondo dell'elemento.
• "imbottitura"Assegna spazio attorno al contenuto dell'elemento.

Produzione

Metodo 2: selezione dell'elemento contenente determinati testo usando il selettore di fratelli Generale CSS

C'è un altro metodo per applicare gli stili sugli elementi con testo. Ma questo metodo dovrebbe essere utilizzato quando hai più "

"Elementi che hanno del testo e devi modellarli tutti in una volta. Per fare ciò, specificare l'elemento che è poco prima del "

"Elementi, quindi aggiungi il simbolo del combinatori fratelli generali (~) e menziona l'elemento con testo per applicare gli stili.

Sintassi

Qui, è la sintassi dello scenario sopra menzionato:

Elemento di prima sequenza ~ Second-Sequence-Element
Dichiarazioni CSS

Esempio

Aggiungiamo lo stile a tutti " H4 ~ P
Colore: cremisi;
Font-weight: audace;

IL "H4 ~ p"Significa"

"Elementi che sono fratelli diretti del"

"Elemento. Le seguenti proprietà descritte vengono aggiunte ad esso:

• IL "Font-peso"La proprietà designa lo spessore del carattere dell'elemento.
• IL "colore"La proprietà fissa il colore del carattere.

Produzione

Utilizzando questi modi, è possibile selezionare elementi con determinati testo da modellare in CSS.

Conclusione

Per selezionare gli elementi contenenti determinati testo, il CSS "selettori di attributi" E "Selettore combinator di fratelli generali" può essere utilizzata. I selettori di attributi specificano il nome dell'attributo dell'elemento e il suo valore. Quindi, dichiara le proprietà CSS per esso. Il selettore combinator di fratelli generali seleziona ogni elemento seguito dal selettore precedente. Questo articolo ha dimostrato i modi per selezionare elementi in CSS con determinati testo.