Saluti, cari lettori. Negli articoli precedenti abbiamo studiato principalmente gli attributi degli stili CSS. Ce ne sono molti. Uno imposta i parametri dei caratteri, altri parametri dello sfondo, il terzo parametri di rientri e cornici.
In questo articolo parleremo dei selettori di stile. Ne abbiamo già parlato in uno degli articoli. Oggi diamo un'occhiata ad altri tipi di selettori che legano implicitamente una regola di stile a un elemento in una pagina web. Questi sono i cosiddetti selettori speciali. Ci sono diversi tipi di loro.
Combinatori in CSS (neighbor, child e selettori di contesto)
Combinatoriè una varietà? selettori css che legano una regola di stile a un elemento di una pagina Web in base alla sua posizione rispetto ad altri elementi.
Primo carattere combinatore un vantaggio(+) o selettore adiacente... Il plus è impostato tra due selettori:
<селектор 1> + <селектор 2> { <стиль> }
Lo stile in questo caso è applicato a selettore 2, ma solo se è adiacente a selettore 1 e va subito dopo. Consideriamo un esempio:
forte + io (
}
...
Questo testo semplice. Questo miniatura, testo normale, testo rosso
Questo è testo normale. Questo è il testo in grassetto, testo normale, e questo è testo semplice.
Risultato:
Lo stile descritto nell'esempio verrà applicato solo al primo testo racchiuso nel tag da segue subito dopo il tag .
Combinatore tilde(~) si applica anche ai selettori adiacenti, ma questa volta potrebbero esserci altri elementi in mezzo. In questo caso, entrambi i selettori devono essere nidificati nello stesso tag genitore:
<селектор 1> ~ <селектор 2> { <стиль> }
Lo stile verrà applicato a selettore 2 che dovrebbe seguire selettore 1... Considera un esempio:
forte ~ io (
colore rosso; / * Colore testo rosso * /
}
...
Questo è testo normale. Questo è il testo in grassetto, testo normale, testo rosso ad esso è stata applicata la regola dei selettori adiacenti.
Questo è testo normale. Questo è il testo in grassetto, testo normale, e questo è il testo rosso.
Risultato:
Come puoi vedere, questa volta la regola di stile ha funzionato per entrambi i testi racchiusi nel tag , nonostante nel secondo caso tra il tag e c'è un tag .
Combinatore > si riferisce a selettori figlio... Consente di associare uno stile CSS a un elemento di una pagina Web direttamente nidificato all'interno di un altro elemento:
<селектор 1> > <селектор 2> { <стиль> }
Stile sarà legato a selettore 2 che è direttamente annidato in selettore 1.
div> forte (
}
...
Questo è testo normale. E questo è un normale testo in grassetto.
E il risultato è:
Come puoi vedere nell'immagine, la regola di stile ha interessato solo il primo tag.
che è nidificato direttamente all'interno del tag
, quindi la regola non si applica a lui. Considera il prossimo selettore di contesto<пробел>
... Ti consente di associare lo stile CSS a un elemento nidificato all'interno di un altro elemento e può essere a qualsiasi livello di nidificazione: <селектор 1> <селектор 2> { <стиль> } Lo stile verrà applicato a selettore 2 se è in qualche modo annidato in selettore 1. Considera l'esempio precedente, solo per Descrizione CSS le regole applicano il selettore di contesto: div forte ( Questo è testo normale. E questo è anche testo in grassetto corsivo. Testo normale e solo testo in grassetto Risultato: Come puoi vedere, questa volta la regola ha interessato entrambi i tag.
, anche uno che è annidato nel contenitore
... Per tag
che è solo annidato all'interno di un paragrafo
regola css non funziona in alcun modo. I selettori di attributo sono selettori speciali che legano uno stile a un elemento in base al fatto che un attributo specifico sia presente o abbia un significato specifico. Ci sono diversi usi per tali selettori. Sembra: <селектор>[<имя атрибута тега>] { <стиль> } E lega lo stile a quegli elementi all'interno dei quali viene aggiunto l'attributo specificato. Ad esempio: forte ( automobileè un motore meccanico trackless veicolo"> veicolo stradale con almeno 4 ruote. Risultato: Nell'immagine, puoi vedere che la regola css (colore del testo rosso) è applicata all'elemento forte a cui si aggiunge l'attributo titolo. La sintassi per questo selettore è la seguente: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } si lega stile agli elementi i cui tag hanno un attributo con lo specificato nel nome e valore... Esempio: un ( Risultato: Come puoi vedere, entrambi gli elementi del tipo di collegamento ipertestuale hanno l'attributo obbiettivo ma al tag viene applicata una regola CSS che rende il testo del collegamento una volta e mezza più grande e cambia il suo colore in rosso
il cui attributo obbiettivo ha il significato "_Vuoto". Alcuni valori degli attributi possono essere separati da spazi, come i nomi delle classi. Il seguente selettore viene utilizzato per specificare una regola di stile quando l'elenco dei valori degli attributi contiene il valore richiesto: [<имя атрибута тега>~=<значение>] { <стиль> } Lo stile viene applicato quando l'attributo ha il valore richiesto o è incluso in un elenco di valori separati da spazi. Ad esempio: { Il nostro telefono: 777-77-77 Il nostro indirizzo: Mosca st. sovietico 5 Ottieni il seguente risultato: La regola si applica ad un elemento che ha tra i valori degli attributi classe c'è un valore telefono. È consentito utilizzare un trattino nei valori di identificatori e classi. Per associare uno stile a elementi i cui valori di attributo possono contenere un trattino, puoi utilizzare la seguente costruzione: [attributo | = "valore"] (stile) Lo stile viene applicato a quegli elementi il cui valore dell'attributo inizia con il valore specificato, seguito da un trattino. Ad esempio: { Risultato: Nell'esempio, la regola di stile si applica solo a quegli elementi dell'elenco il cui nome di classe inizia con il valore "Menù-". Questo selettore imposta lo stile per un elemento se il valore dell'attributo tag inizia con un valore specifico. Ci sono due opzioni: [<имя атрибута тега>^=<подстрока>] { <стиль> } Nel primo caso stile si applica a tutti gli elementi i cui tag hanno un attributo con lo specificato nel nome e un valore che inizia con il valore specificato sottostringhe... Nel secondo caso, la stessa cosa, solo a determinati elementi specificati in selettore principale... Esempio: un ( Risultato: L'esempio mostra come visualizzare i collegamenti esterni e i collegamenti interni in modo diverso. I collegamenti esterni iniziano sempre con la stringa "http: //". Pertanto, nel selettore, indichiamo che lo stile deve essere applicato solo ai collegamenti il cui attributo href inizia con il valore http: //. Associa lo stile agli elementi il cui valore dell'attributo termina con il testo specificato. Ha la seguente sintassi: [<имя атрибута тега>$=<подстрока>] { <стиль> } Nel primo caso stile si applica a tutti gli elementi che hanno attributo con la specificata nel nome e ha un valore che termina con la specificata sottostringa... Nel secondo caso, la stessa cosa, solo a quanto indicato selettori... In questo modo, ad esempio, diversi formati di visualizzazione grafica possono essere visualizzati in modi diversi. Ad esempio: IMMAGINE ( Immagine GIF Immagine in formato PNG Risultato: Nell'esempio, tutte le immagini con estensione gif verranno visualizzate con un bordo rosso di cinque pixel. Questo selettore associa lo stile ai tag il cui valore di attributo contiene testo specifico. Sintassi: [<имя атрибута тега>*=<подстрока>] { <стиль> } Stile si lega a elementi che hanno attributo con il nome specificato e il suo valore contiene la specificata sottostringa... Ad esempio: IMMAGINE ( Immagine dalla cartella della galleria Immagine da un'altra cartella Risultato: Nell'esempio, lo stile viene applicato alle immagini caricate dalla cartella "Galleria". Questo è tutto sui selettori di attributi. Tutti i metodi di cui sopra possono essere combinati tra loro: Selettore [attributo1 = "valore1"] [attributo2 = "valore2"] (stile) Inoltre, lascia che ti ricordi i selettori CSS speciali: Nei prossimi articoli esamineremo anche pseudo-elementi e pseudo-classi, che forniscono un potente strumento di gestione dello stile. Questo è tutto, finché non ci incontreremo di nuovo. Vlad Merzhevich Molti tag differiscono nel loro effetto a seconda degli attributi utilizzati in essi. Ad esempio, il tag può creare un pulsante, una casella di testo e altri elementi del modulo semplicemente modificando il valore dell'attributo type. In questo caso, l'aggiunta di regole di stile al selettore INPUT applicherà lo stile contemporaneamente a tutti gli elementi creati utilizzando questo tag. Per controllare in modo flessibile lo stile di tali elementi, nei CSS sono stati introdotti i selettori di attributo. Consentono di impostare lo stile in base alla presenza di uno specifico attributo del tag o del suo valore. Diamo un'occhiata ad alcuni usi tipici di tali selettori. Imposta lo stile per un elemento se viene specificato un attributo tag specifico. Il suo significato non è importante in questo caso. La sintassi per l'utilizzo di tale selettore è la seguente. [attributo] (Descrizione delle regole di stile) Lo stile viene applicato a quei tag all'interno dei quali viene aggiunto l'attributo specificato. Lo spazio tra il nome del selettore e le parentesi quadre non è consentito. L'esempio 13.1 mostra la modifica dello stile di un tag Esempio 13.1. Tipo di elemento a seconda del suo attributo HTML5 CSS 2.1 IE Cr Op Sa Fx
Continuando la nota legge di Murphy, che afferma: Il risultato dell'esempio è mostrato in Fig. 13.1. Riso. 13.1. Modifica dello stile di un elemento in base all'applicazione dell'attributo title Questo esempio cambia il colore del testo all'interno del contenitore. Imposta lo stile per un elemento quando viene specificato un valore specifico per un attributo specifico. La sintassi è la seguente. [attributo = "valore"] (Descrizione delle regole di stile) Nel primo caso, lo stile viene applicato a tutti i tag che contengono il valore specificato. E nel secondo - solo a determinati selettori. L'Esempio 13.2 mostra come modificare lo stile di un collegamento nel caso in cui il tag contiene un attributo di destinazione con un valore di _blank. In questo caso, il link si aprirà in una nuova finestra e per mostrarlo, usando gli stili aggiungi una piccola immagine davanti al testo del link. Esempio 13.2. Stile per l'apertura dei collegamenti in una nuova finestra HTML5 CSS 2.1 IE Cr Op Sa Fx
Il risultato dell'esempio è mostrato di seguito (Fig. 13.2). Riso. 13.2. Modifica dello stile dell'elemento in base al valore target In questo esempio, viene aggiunta un'immagine al collegamento utilizzando la proprietà background. La sua funzione è quella di creare un'immagine di sfondo ripetuta, ma la ripetizione dello sfondo può essere annullata utilizzando il valore di non ripetizione, che alla fine risulta in un'unica immagine. Imposta lo stile per l'elemento se il valore dell'attributo tag inizia con il testo specificato. La sintassi è la seguente. [attributo ^ = "valore"] (Descrizione delle regole di stile) Nel primo caso, lo stile viene applicato a tutti gli elementi il cui valore dell'attributo inizia con il testo specificato. E nel secondo - solo a determinati selettori. L'uso delle virgolette è facoltativo, ma solo se il valore contiene lettere latine e senza spazi. Supponiamo che il sito debba separare lo stile dei collegamenti regolari da quelli esterni, ovvero i collegamenti che portano ad altri siti. Per non essere iniettato nel tag nuova classe, usiamo i selettori di attributo. I collegamenti esterni sono caratterizzati dall'aggiunta di un protocollo all'indirizzo, ad esempio il protocollo HTTP viene utilizzato per accedere a documenti ipertestuali. Pertanto, i collegamenti esterni iniziano con la parola chiave http: // e la aggiungono al selettore A, come mostrato nell'Esempio 13.3. HTML5 CSS 2.1 IE Cr Op Sa Fx
Riso. 13.3. Cambia lo stile per gli xrif Imposta lo stile per l'elemento se il valore dell'attributo termina con il testo specificato. La sintassi è la seguente. [attributo $ = "valore"] (Descrizione delle regole di stile) Nel primo caso, lo stile viene applicato a tutti gli elementi il cui valore di attributo termina con il testo specificato. E nel secondo - solo a determinati selettori. In questo modo, puoi separare automaticamente lo stile per i link a siti nel dominio ru e per i link a siti in altri domini come com, come mostrato nell'Esempio 13.4. Esempio 13.4. Stile per diversi domini HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru V questo esempio contiene due collegamenti che portano a domini diversi: com e ru. Allo stesso tempo, a ciascuno di questi collegamenti viene aggiunta un'immagine di sfondo con l'aiuto degli stili (Fig. 13.4). Le proprietà di stile verranno applicate solo ai collegamenti il cui attributo href termina con ".ru" o ".com". Nota che aggiungendo una barra (http://www.yandex.ru/) o un indirizzo di pagina (http://www.yandex.ru/fun.html) al nome del dominio, cambieremo la fine e lo stile non verrà più applicato... In questo caso, è meglio usare un selettore in cui il testo specificato appare ovunque nel valore dell'attributo. Ci sono opzioni quando lo stile deve essere applicato a un tag con un determinato attributo e del testo fa parte del suo valore. Allo stesso tempo, non si sa esattamente dove questo testo sia incluso nel significato: all'inizio, nel mezzo o alla fine. In tal caso, dovresti usare questa sintassi. [attributo * = "valore"] (Descrizione delle regole di stile) L'Esempio 13-5 mostra come modificare lo stile dei link che contengono la parola "htmlbook" nell'attributo href. Esempio 13.5. Stile per diversi siti HTML5 CSS 2.1 IE Cr Op Sa Fx
Passo dopo passo | Grafica per il Web Il risultato di questo esempio è mostrato in Fig. 13.5. Riso. 13.5. Modifica dello stile per i link che contengono "htmlbook" Alcuni valori degli attributi possono essere separati da spazi, come i nomi delle classi. La seguente sintassi viene utilizzata per impostare lo stile quando il valore desiderato è nell'elenco. [attributo ~ = "valore"] (Descrizione delle regole di stile) Lo stile viene applicato se l'attributo ha valore specificato oppure è incluso in un elenco di valori separato da spazi (esempio 13.6). Esempio 13.6. Stile basato sul nome della classe HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
In questo esempio, il colore del testo verde viene applicato al selettore H3 se il nome della classe del livello è impostato su blocco. Nota che un risultato simile può essere ottenuto usando la costruzione * = invece di ~ =. È possibile utilizzare il carattere trattino (-) negli identificatori e nei nomi delle classi, che consente di creare valori significativi per l'id e gli attributi della classe. Usa la seguente sintassi per cambiare lo stile degli elementi che hanno un trattino nel loro valore. [attributo | = "valore"] (Descrizione delle regole di stile) Lo stile viene applicato agli elementi il cui attributo inizia con il valore specificato o con un frammento del valore seguito da un trattino (esempio 13.7). Esempio 13.7. Trattini nei significati HTML5 CSS 2.1 IE Cr Op Sa Fx
In questo esempio, il nome della classe è impostato come block-menu-therm, quindi gli stili usano la costruzione | = "block", poiché il valore inizia con questa parola e nel valore sono presenti trattini. Tutti i metodi precedenti possono essere combinati tra loro, definendo lo stile per gli elementi che contengono due o più attributi. In questi casi, le parentesi quadre sono in fila. [attributo1 = "valore1"] [attributo2 = "valore2"] (Descrizione delle regole di stile) 1. È necessario impostare il colore di sfondo del campo di testo. Qual è lo stile giusto per questo scopo? 2. Quale stile dovresti usare per cambiare il colore del testo solo del secondo paragrafo? Primo paragrafo Secondo paragrafo Terzo paragrafo 3. A quale elemento verrà applicato il seguente stile? (sfondo: # 666;) Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 1. INGRESSO (sfondo: #acdacc;) 2.P (colore: rosso;) 3. Nonostante la loro flessibilità e varietà, i selettori di attributo sono usati raramente nei CSS. Sebbene la loro applicazione offra grandi opportunità agli sviluppatori web. Consentono di modificare le proprietà di un elemento con un determinato attributo e, inoltre, con un valore specifico. Vengono utilizzate sintassi diverse per i selettori di attributo, a seconda del risultato desiderato. Utilizzato per impostare lo stile di un attributo se il valore dell'attributo è irrilevante. E ha la seguente sintassi: [attributo] (proprietà1: valore; ...) selettore [attributo] (proprietà1: valore; ...) Ad esempio, prova a scrivere questa riga nel tuo foglio di stile, ad esempio: P (colore: rosso; / * Colore testo * /) Il colore del testo cambierà solo quando l'attributo align viene applicato al tag p. Si applica quando viene specificato un attributo con un valore specifico. La sintassi dell'applicazione è la seguente: [attributo = "valore"] (proprietà1: valore; ...) selettore [attributo = "valore"] (proprietà1: valore; ...) In pratica, ad esempio, si può applicare quanto segue: P (colore: rosso; / * Colore testo * /) p (colore: blu marino; / * Colore testo * /) Questo modo di impostare lo stile può essere applicato, ad esempio, a collegamenti o altri elementi i cui valori di attributo iniziano con determinati nomi. Ad esempio: Img (margine: 15px automatico;) La sintassi per questo modo di applicare lo stile è la seguente: [attributo ^ = "valore"] (proprietà1: valore; ...) selettore [attributo ^ = "valore"] (proprietà1: valore; ...) È usato abbastanza raramente. In genere, questo metodo di stile viene utilizzato alla fine del nome di qualsiasi collegamento o autorizzazione file. La sintassi generale è: [attributo $ = "valore"] (proprietà1: valore; ...) selettore [attributo $ = "valore"] (proprietà1: valore; ...) Puoi applicare questo metodo in questo modo: Img (/ * Se la risoluzione del file immagine termina con .png * / margin: 10px auto;) a (/ * Se il collegamento termina con .com * / padding-right: 25px;) Ci sono momenti in cui è necessario impostare stili per determinati collegamenti che hanno lo stesso testo nel nome del valore dell'attributo. La sintassi è la seguente: [attributo * = "valore"] (proprietà1: valore; ...) selettore [attributo * = "valore"] (proprietà1: valore; ...) Ad esempio, ho applicato uno stile per modificare l'aspetto dei collegamenti in cui si verifica il nome "sdcvoy":
Autocreazione di un sito | Linguaggio HTML | Famoso motore di ricerca Di conseguenza, ho finito con quanto segue: Spesso, quando si specificano gli attributi, è presente un elenco di diversi valori separati da uno spazio. Come avrai intuito, puoi impostare le proprietà di stile per un singolo valore. La sintassi per questo metodo è la seguente: [attributo ~ = "valore"] (proprietà1: valore; ...) selettore [attributo ~ = "valore"] (proprietà1: valore; ...) Suggerisco di guardare un piccolo esempio:
Il risultato dovrebbe essere simile a questo: Molto spesso il nome dei valori degli attributi è composto da più parole separate da un trattino. E capita che la prima parola del titolo si ripeta. Quindi, per tali attributi, puoi impostare gli stili separatamente. Questo è fatto molto semplicemente. Ad esempio così: Div a (colore: verde; / * Colore collegamento * / padding: 15px; / * Margini * /) La sintassi di utilizzo generale è: [attributo | = "valore"] (proprietà1: valore; ...) selettore [attributo | = "valore"] (proprietà1: valore; ...) Potresti non ricordare l'uso dei selettori di attributi, come ho detto prima che sono usati raramente, ma sono uno strumento molto flessibile nello sviluppo web. Nel frattempo, suggerisco di passare al prossimo argomento. CSS è un potente strumento di sviluppo web. Ci permette di dare vita a quasi tutte le nostre idee e idee. Un importante vantaggio dei CSS è la capacità di applicare stili a tutti gli elementi dello stesso tipo in una pagina. Per utilizzare questa opportunità in modo efficace, è necessario comprendere bene con Selettori CSS... Un selettore è esattamente ciò a cui si applica una regola. Esistono diversi tipi di selettori CSS. Passiamo a considerare questi tipi ed esempi della loro applicazione. Un selettore universale imposta lo stile per tutti gli elementi nel documento. È indicato da un asterisco (*). Ad esempio, questo specifica che tutti gli elementi sono colorati in rosso: * (colore rosso;) Quando si scrivono stili per un documento HTML, i tag HTML (h1, p, img, a, body ...) vengono utilizzati come elementi. Ad esempio: H1 (font-family: Verdana; font-size: 12px; color: # 666;) V in questo caso tutte le intestazioni di primo livello nel documento saranno in carattere Verdana, 12px e grigio. Questo selettore consente di assegnare uno stile indipendentemente dal tipo di elemento. Ma affinché funzionino, è necessario aggiungere alcune note al codice HTML, vale a dire l'attributo di classe con un valore che utilizzerai durante la creazione della regola CSS. Supponiamo che tu voglia inquadrare alcune delle immagini sulla pagina. L'attributo class è assegnato a queste immagini. Ad esempio:
E nel foglio di stile scriviamo la regola: Border_img (bordo: 1px solido # 00f;) Questa classe può essere applicata a molti elementi di una pagina e non necessariamente solo alle immagini. Diverse classi possono essere applicate a un elemento HTML contemporaneamente, scritte separate da uno spazio: Consente inoltre di assegnare uno stile indipendentemente dal tipo di elemento. Ma, a differenza del selettore di classe, può essere utilizzato solo una volta in un documento. È indicato dal simbolo cancelletto (#). Al tag viene assegnato l'attributo id. Ad esempio:
Sono utilizzati per selezionare elementi in base ai loro attributi, nonché ai valori di questi attributi. Per selezionare un elemento in base al suo attributo, indipendentemente dal valore di questo attributo, viene utilizzata la seguente costruzione: [attributo]. Ad esempio, dobbiamo contrassegnare le immagini con l'attributo alt impostato con un bordo rosso. Facciamo questo:
Puoi selezionare solo tag i cui attributi hanno un significato specifico. È necessario, ad esempio, applicare la regola - dimensione del testo 16px a tutti i tag con l'attributo type, il cui valore è testo. È fatto come segue: (dimensione carattere: 16px;) Se è necessario selezionare elementi il cui attributo di classe contiene la parola img, viene utilizzato il seguente codice: (margine: 5px;) Se devi selezionare un attributo il cui valore inizia con del testo: (colore: # 009); Se devi selezionare un attributo il cui valore termina con del testo: (dimensione carattere: 10px;) Se devi selezionare un attributo il cui valore contiene del testo: (colore di sfondo: # 0cc;) Selettori discendenti significa impostare regole per quegli elementi che si trovano all'interno di un determinato elemento. Un esempio lo renderà più chiaro. Diciamo che devi evidenziare in rosso solo quei collegamenti a che sono all'interno del paragrafo p e sono figli di esso: Per selezionare elementi adiacenti situati allo stesso livello, avendo un genitore, procedi come segue:
Per la selezione elementi, situato allo stesso livello, avendo un solo genitore farlo. Vicini in questo caso sono i tag strong ed em, così come em e a. Una pseudo-classe è una classe fantasma, la cui presenza dipende dallo stato di un elemento o dalla struttura del documento nel suo insieme. Le pseudo-classi vengono spesso utilizzate sugli elementi del modulo di input o per specificare il comportamento dei collegamenti o degli elementi attivi. Ad esempio, devi cambiare il colore dei link visitati: A: visitato (colore: # 933;) Oppure, ad esempio, modificare il colore del testo in primo piano (posizionando il cursore) sul campo di testo del form: Input: messa a fuoco (colore: rosso;) Selettori di pseudo elementi Gli pseudo-elementi sono elementi fittizi condizionali che fanno parte di elementi esistenti o vengono introdotti in aggiunta nel documento. Il selettore di pseudo-elementi e il selettore di pseudo-classe sono, sintatticamente parlando, la stessa cosa. L'unica differenza è negli elementi selezionabili. I CSS2 definiscono 4 pseudo-elementi: la prima lettera (: first-letter), la prima riga (: first-line) e l'applicazione di stili speciali prima (: prima) e dopo (: dopo) l'elemento. Impostiamo, ad esempio, uno stile diverso per la prima lettera di ogni paragrafo: P: prima lettera (font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: # 333;) I selettori rendono abbastanza facile creare regole CSS che si applicano a un gran numero di elementi simili. I selettori di attributo sono selettori che ti consentono di applicare stili a qualsiasi elemento HTML che ha un attributo specifico o un valore di attributo specifico. Ci sono molti modi per usarli, ma nonostante questa flessibilità, in pratica i selettori di attributo sono usati raramente perché ci sono selettori più convenienti. Anche se, d'altra parte, a volte sono molto utili. Sì, e come al solito ti dico: non cercare di memorizzare tutto ciò che è scritto sotto, se sei amico della tua testa. :) Da questa lezione, devi ricordare una cosa: cosa è scritto nel primo paragrafo. Il resto devi solo capire e capire. Così. Per applicare stili agli elementi con un attributo specifico, è necessario specificare questo attributo tra parentesi quadre. [attributo] ( valore della proprietà; ...) Affinché gli stili vengano applicati a elementi che non hanno solo un attributo specifico, ma un attributo con un valore specifico, è necessario scrivere un segno di uguale (=) dopo l'attributo e questo valore, che può essere racchiuso tra virgolette. [attributo = "valore"] ( valore della proprietà; ...) Alcuni attributi possono avere più valori separati da spazi contemporaneamente (ad esempio, l'attributo rel di un tag o di una classe, che esamineremo un po' più avanti). Quindi, per impostare gli stili per gli elementi che hanno lo stesso valore negli attributi, è necessario inserire i segni ~ = (approssimativamente uguali) dopo l'attributo, quindi scrivere il valore richiesto. [attributo ~ = "valore"] ( valore della proprietà; ...) La quarta opzione è destinata agli attributi il cui valore può essere costituito da più parole separate da un trattino (ad esempio, la stessa classe). E ti permette di applicare stili a tutti gli elementi che hanno la stessa prima parola nel valore dell'attributo. Ad esempio, class = "block-left" e class = "block-right". La parte qui è la stessa: blocco, quindi può essere utilizzata come valore. [attributo | = "valore"] ( valore della proprietà; ...) Il quinto metodo collega gli stili agli elementi i cui valori di attributo iniziano con lo stesso testo. Ad esempio, src = "images/bird.png" e src = "images/cat.jpg". Ecco la stessa parte di immagini / o immagini o immagine, ecc. È questa parte identica che viene registrata come valore. [attributo ^ = "valore"] ( valore della proprietà; ...) È simile al quinto, ma qui la selezione si svolge lungo la parte di testo che, invece, termina con i valori degli attributi. Diciamo src = "image / bird.png" e src = "picture / dog.png". È chiaro che la parte .png è la stessa qui. [$ attributo = "valore"] ( valore della proprietà; ...) Se è necessario selezionare elementi i cui valori di attributo hanno la stessa parte del testo e non importa dove si trova il valore, viene utilizzato questo metodo. Ad esempio, href = "http: // site / css /" e href = "http: //www.site/html/". Ecco la stessa parte del "sito". Pertanto, supponiamo che tu possa selezionare tutti i collegamenti che portano a un sito specifico. [attributo * = "valore"] ( valore della proprietà; ...) Sfortunatamente, Internet Explorer 6.0 non comprende affatto i selettori di attributo. Un esempio di utilizzo dei selettori di attributo nei CSS
Risultato nel browser
stile del carattere: corsivo / * corsivo * /
}
...
Selettori di attributi dei tag
1. Selettore di attributi semplice
colore rosso;
}
...
2. Selettore di attributi con valore
colore rosso;
dimensione del carattere: 150%;
}
...
.ru "target =" _ blank "> Collegamento in una nuova finestra
3. Uno dei tanti valori di attributo
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
colore rosso;
dimensione del carattere: 150%;
}
...
4. Trattino nel valore dell'attributo
Selettore [attributo | = "valore"] (stile)
colore rosso;
dimensione del carattere: 150%;
}
...
5. Il valore dell'attributo inizia con un testo specifico
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
colore: verde;
font-weight: grassetto;
}
...
6. Il valore dell'attributo termina con un testo specifico
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
bordo: 5px rosso pieno;
}
...
7. Il valore dell'attributo contiene la stringa specificata
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
bordo: 5px rosso pieno;
}
...
Selettore di attributi semplice
Selettore [attributo] (Descrizione delle regole di stile) , nel caso in cui venga aggiunto l'attributo title.
Se possono capitare problemi, allora accadranno sicuramente.
, possiamo inserire la nostra osservazione: Dopo che una pagina Web viene visualizzata correttamente in un browser, risulta che non viene visualizzata correttamente in un altro
.quando il titolo è aggiunto ad esso. Si noti che non è necessario ripetere le proprietà di stile per il selettore Q poiché eredita dal selettore Q.
Attributo con valore
Selettore [attributo = "valore"] (Descrizione delle regole di stile)
Il valore dell'attributo inizia con un testo specifico
Selettore [attributo ^ = "valore"] (Descrizione delle regole di stile)Il valore dell'attributo termina con un testo specifico
Selettore [attributo $ = "valore"] (Descrizione delle regole di stile)
Il valore dell'attributo contiene il testo specificato
Selettore [attributo * = "valore"] (Descrizione delle regole di stile)
Uno dei tanti valori degli attributi
Selettore [attributo ~ = "valore"] (Descrizione delle regole di stile)Intestazione
Trattino nel valore dell'attributo
Selettore [attributo | = "valore"] (Descrizione delle regole di stile)
Selettore [attributo1 = "valore1"] [attributo2 = "valore2"] (Descrizione delle regole di stile)Domande da verificare
Risposte
Selettore di attributi semplice
Attributo con valore
Il valore dell'attributo inizia con un testo specifico
Il valore dell'attributo termina con un testo specifico
Il valore dell'attributo contiene il testo specificato
Uno dei tanti valori degli attributi
Intestazione rossa
Trattino nel valore dell'attributo
Selettore universale
Selettori di elementi
Selettori di classe
Selettori ID
Selettori di attributi
img (bordo: 1px rosso pieno;)Selettori discendenti (selettori contestuali)
Selettori fratelli
Selettori di pseudo-classe
Sintassi del selettore di attributo
.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}