Dettagli del selettore attributo CSS
- Pagina precedente Dettagli del selettore id CSS
- Pagina successiva Selettore discendente di CSS
CSS 2 ha introdotto il selettore di attributo.
Il selettore di attributo può selezionare gli elementi in base alle proprietà e ai valori degli attributi degli elementi.
Selettore di attributo semplice
Se desideri selezionare un elemento con un attributo specifico, indipendentemente dal valore dell'attributo, puoi utilizzare il selettore di attributo semplice.
Esempio 1
Se desideri che tutti gli elementi che contengono un titolo (title) siano rossi, puoi scrivere:
*[title] {color:red;}
Esempio 2
Simile a quello sopra, puoi applicare lo stile solo agli elementi a con l'attributo href:
a[href] {color:red;}
Esempio 3
Puoi anche scegliere in base a più attributi, basta connettere insieme i selettori di attributo.
Ad esempio, per impostare il testo di un link HTML che ha sia l'attributo href che l'attributo title di rosso, si può scrivere così:
a[href][title] {color:red;}
Esempio 4
È possibile utilizzare questa caratteristica in vari modi creativi.
Ad esempio, è possibile applicare uno stile a tutte le immagini con l'attributo alt per evidenziare queste immagini valide:
img[alt] {border: 5px solid red;}
提示：Questo esempio è più adatto per la diagnostica piuttosto che per il design, ossia per determinare se un'immagine è effettivamente valida.
Esempio 5: Utilizzo dei selettori di attributo per documenti XML
I selettori di attributo sono molto utili nei documenti XML, poiché il linguaggio XML enfatizza la specificazione dei nomi degli elementi e degli attributi per l'uso degli elementi.
Supponiamo di aver progettato un documento XML per descrivere i pianeti del sistema solare. Se si desidera selezionare tutti gli elementi planet con l'attributo moons e renderli visibili in rosso, per enfatizzare i pianeti con il numero di lune, si può scrivere così:
planet[moons] {color:red;}
Questo renderà il testo del secondo e del terzo elemento all'interno del seguente frammento di tag rosso, ma il testo del primo elemento non sarà rosso:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
Selezione in base al valore dell'attributo
Oltre a selezionare gli elementi che possiedono determinati attributi, è possibile ulteriormente restringere l'intervallo di selezione, selezionando solo gli elementi con valori di attributi specifici.
Esempio 1
Ad esempio, se si desidera che un link che punta a un documento specifico sul server Web diventi rosso, si può scrivere così:
a[href="http://www.codew3c.com/about_us.asp"] {color: red;}
Esempio 2
Allo stesso modo di un selettore di attributo semplice, è possibile connettere insieme più selettori attributo-valore per selezionare un documento.
a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}
Questo renderà il testo del primo link all'interno dei seguenti tag di collegamento rosso, ma il secondo o il terzo link non sarà influenzato:
<a href="http://www.codew3c.com/" title="W3School">W3School</a> <a href="http://www.codew3c.com/css/" title="CSS">CSS</a> <a href="http://www.codew3c.com/html/" title="HTML">HTML</a>
Esempio 3
Analogamente, il linguaggio XML può utilizzare questo metodo per impostare lo stile.
Torniamo ora all'esempio dei pianeti. Supponiamo di voler selezionare solo gli elementi planet con il valore dell'attributo moons uguale a 1:
planet[moons="1"] {color: red;}
Il codice seguente renderà rosso il secondo elemento dei seguenti tag, ma l'elemento primo e terzo non saranno influenzati:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
L'attributo e il valore dell'attributo devono corrispondere completamente
Si prega di notare che questo formato richiede una corrispondenza completa con il valore dell'attributo.
Se il valore dell'attributo contiene una lista di valori separati da spazi, la corrispondenza potrebbe avere problemi.
Pensate a questo frammento di etichetta:
<p class="important warning">Questo paragrafo è una avvertenza molto importante.</p>
Se si scrive p[class="important"], questa regola non può corrispondere al tag di esempio.
Per selezionare l'elemento specifico basato sul valore dell'attributo, è necessario scrivere così:
p[class="important warning"] {color: red;}
Scelta basata sul selettore di valore parziale dell'attributo
Se è necessario selezionare in base a una parola specifica della lista di valori dell'attributo, è necessario utilizzare il trattino obliquo (~).
Supponiamo che si voglia selezionare l'elemento che contiene "important" nell'attributo class, è possibile farlo con il seguente selettore:
p[class~="important"] {color: red;}
Se si ignora il trattino obliquo, significa che è necessario completare una corrispondenza di valore completa.
La differenza tra il selettore di attributo di valore parziale e la notazione del punto del nome della classe.
Questo selettore è equivalente al punto di classe discusso nella scelta del selettore di classe.
Questo significa che p.important e p[class="important"] sono equivalenti quando applicati a un documento HTML.
Allora, perché c'è il selettore di attributo "~="? Perché può essere utilizzato per qualsiasi attributo, non solo per class.
Ad esempio, può esserci un documento contenente un gran numero di immagini, di cui solo alcune sono immagini. In questo caso, è possibile utilizzare un selettore di attributo parte basato su title per selezionare solo queste immagini:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
| 类型 | Descrizione |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
可以想到，这些选择有很多用途。
举例来说，如果希望对指向 CodeW3C.com 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="codew3c.com"] {color: red;}
提示：任何属性都可以使用这些选择器。
特定属性选择类型
最后为您介绍特定属性选择器。请看下面的例子：
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-<p lang="au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
一般来说，[att|="val"] 可以用于任何属性及其值。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}
Certo, l'uso più comune di questo selettore di attributo è ancora abbinare i valori di lingua.
Manuale di riferimento dei selettori CSS
| Selettore | Descrizione |
|---|---|
| [attribute] | Utilizzato per selezionare l'elemento che ha un attributo specificato. |
| [attribute=value] | Utilizzato per selezionare l'elemento che ha un attributo specificato con un valore specificato. |
| [attribute~=value] | Utilizzato per selezionare l'elemento che ha un attributo con un valore che contiene il vocabolo specificato. |
| [attribute|=value] | Utilizzato per selezionare l'elemento che ha un attributo con un valore che inizia con il valore specificato, il valore deve essere una parola intera. |
| [attribute^=value] | Corrisponde a ogni elemento che inizia con il valore specificato. |
| [attribute$=value] | Corrisponde a ogni elemento che termina con il valore specificato. |
| [attribute*=value] | Corrisponde a ogni elemento che contiene il valore specificato nell'attributo. |
- Pagina precedente Dettagli del selettore id CSS
- Pagina successiva Selettore discendente di CSS
