Selettore per jolly CSS
Selettori jolly
- IL [Attributo*= "Value"] è un selettore jolly che viene utilizzato per trovare elementi il cui valore di attributo include la stringa che abbiamo dato qui come valore.
- IL [attributo = "valore"] è un selettore jolly che viene utilizzato per trovare elementi il cui valore dell'attributo inizia con la stringa che abbiamo dato qui come valore.
- IL [attributo $ = "valore"] Il selettore è un selettore jolly che viene utilizzato per trovare elementi il cui valore dell'attributo termina con la stringa che abbiamo dato qui come valore.
Esempio 1
Stiamo iniziando il nostro codice ed eseguendo questi codici nel codice Visual Studio. Innanzitutto, apriamo un nuovo file. Quindi, scegliamo HTML come linguaggio e poi mettiamo "!”E premere“ Invio ”. Tutti i tag di base HTML appaiono qui. Quindi, non abbiamo bisogno di aggiungere manualmente tutti questi tag. Abbiamo appena messo il tag "link" nella "testa" in cui inseriamo il nome del file CSS. All'interno del corpo, mettiamo una voce e alcuni contenitori di div. Tutti i div e i paragrafi contengono nomi di classe diversi, quindi useremo questi nomi come valore nel selettore jolly per selezionare gli elementi in CSS. Quindi, applicheremo uno stile diverso agli elementi selezionati.
Mettiamo la sintassi del wildcard Selector [class * = "STR"] che selezionerà tutti gli elementi il cui nome di classe contiene "STR". Passiamo "STR" come valore di questo selettore jolly. Applicheremo alcune proprietà in modo da notare facilmente come seleziona gli elementi e applica lo stile a tutti loro. Impostamo "nero" come "sfondo" per tutti gli elementi che contengono "str" nei nomi della loro classe.
Stiamo impostando il testo "colore" su "bianco" perché abbiamo usato il nero per lo sfondo. Modifichiamo anche le dimensioni del testo utilizzando la proprietà "Size" e impostandolo su "18px". Allineiamo anche il testo degli elementi selezionati al "centro" utilizzando la proprietà "Font-Family" e la imposti sul carattere "Arial". Il peso del carattere degli elementi selezionati è impostato su "grassetto". Forniamo anche l'output di codici in questo tutorial. Vedere l'output e controllare come seleziona gli elementi e applica tutte queste proprietà agli elementi selezionati.
L'output mostra che seleziona tutti gli elementi i cui nomi di classe contengono "STR" e le proprietà che abbiamo utilizzato nel codice CSS sono tutte applicate agli elementi selezionati.
Esempio 2
Abbiamo di nuovo più classi DIV e più paragrafi con nomi di classi diversi e una voce all'inizio. Applicheremo il selettore jolly in CSS e selezioneremo gli elementi da questo file HTML e modificheremo lo stile di quegli elementi selezionati.
Utilizziamo la seconda sintassi del jolly in questo esempio che è [classe $ = "STR"]. Selezionerà tutti quegli elementi i cui nomi di classe terminano con la stringa "STR". Applichiamo anche le proprietà di styling fornite che stiamo utilizzando sugli elementi selezionati. Decoriamo il testo selezionato usando la proprietà "decorato di testo" e mettiamo "sottolineatura" per questa proprietà. Abbiamo cambiato il "colore" del testo in "marrone". Utilizziamo anche la proprietà "Size di carattere" e posizioniamo "22px" come valore per modificare la dimensione del testo. Usiamo anche l'attributo "Font-Family" per impostare il carattere su "Times New Roman" e il "font-peso" dell'elemento selezionato è stato impostato su "Bold."
Qui, puoi vedere tutte quelle classi i cui nomi finiscono con la stringa "STR" sono selezionati e modificati. Tutte le proprietà che abbiamo descritto nel CSS sono applicate qui su quegli elementi i cui nomi di classe finiscono a "STR". Questo è tutto a causa dell'uso del selettore jolly.
Esempio 3
Questo file html è lo stesso di sopra. Cambiamo solo i nomi delle classi di div e paragrafo. Useremo la terza sintassi del selettore jolly in CSS per questo codice.
In questo esempio, useremo la terza sintassi del jolly che è [classe^= "str"] e selezionerà tutti quegli elementi il cui nome di classe inizia con la stringa "STR". Per tutti gli elementi con "STR" all'inizio dei nomi della classe, impostiamo "Pink" come "sfondo". Abbiamo cambiato il "colore" del testo in "rosso". Utilizziamo la proprietà "Size Font" e la specifichiamo su "22px" per modificare la dimensione del testo. Utilizziamo anche l'attributo "Font-Family" per definire il tipo di carattere per "calibri" e spostare il testo degli elementi selezionati nel "centro". Lo stile del carattere degli elementi specifici è stato messo qui su "corsivo".
In questo screenshot, tutti quegli elementi sono disegnati il cui nome di classe inizia con la stringa "STR". Il selettore jolly seleziona tutti quegli elementi e applica tutte le proprietà ad essi. Puoi anche vederlo nell'output.
Esempio 4
Cambieremo un po 'il codice HTML precedente. Stiamo aggiungendo più contenitori di div e aggiungendo più paragrafi nel file HTML precedente e applicheremo tutti e tre i selettori jolly nel codice CSS di questo esempio.
In questo codice, applichiamo prima un po 'di stile all'intestazione e modifichiamo la "famiglia di carattere" a "algerina". Abbiamo anche impostato l'intestazione nel "centro" utilizzando la proprietà "allineate al testo". La proprietà "Decorazione del testo" è qui che ci siamo sistemati come "sottolineatura", quindi disegnerà la sottolinea. Il "colore" per questo è impostato come "marrone".
Quindi, usiamo il selettore jolly in cui abbiamo inserito "*" e "STR" come valore. Quindi, selezionerà tutte le classi che contengono "STR" nel nome della loro classe. Usiamo anche alcune proprietà che si applicheranno agli elementi selezionati. Dopo aver impostato le proprietà di stile per questo selettore jolly, ci stiamo muovendo verso il prossimo selettore jolly che è "[class^=" par "]" selezionerà tutti gli elementi in cui i nomi delle classi iniziano con la stringa "par" e si applicherà queste fornite proprietà su quegli elementi.
Ora stiamo usando l'ultimo selettore jolly qui che scriviamo come "[classe $ =" div "]". Quindi, selezionerà quegli elementi il cui nome di classe termina nella stringa "div" e applicherà anche le proprietà fornite su tutti loro. Tutti questi selettori di jolly ignorano gli elementi che non soddisfano le condizioni di questi selettori jolly.
Guarda questo output, quegli elementi che contengono "STR" nei nomi della classe sono disegnati lo stesso, quegli elementi il cui nome di classe inizia con "par" sono in stile lo stesso e quegli elementi il cui nome di classe contiene "div" alla fine Il nome della classe è lo stesso. E quegli elementi che non contengono "STR" nel nome della classe e anche i loro nomi di classe non iniziano con "par" e non finiscono nella stringa "div" non sono selezionati e appaiono semplici qui. Nessuna proprietà viene applicata a loro.
Conclusione
L'obiettivo di scrivere questo tutorial è di guidarti sui selettori CSS Wildcard. Abbiamo esplorato i selettori di jolly CSS e ti abbiamo spiegato quali sono i selettori di jolly, come usare questi selettori di jolly e come funzionano. Abbiamo discusso che i selettori di jolly sono usati per scegliere più elementi contemporaneamente e utilizzati per applicare proprietà di stile a quegli elementi che abbiamo scelto utilizzando questi selettori jolly. Abbiamo anche mostrato esempi in cui abbiamo utilizzato quei selettori jolly e abbiamo fornito le uscite di tutti gli esempi in questo tutorial.