属性选择器允许您根据属性的存在或属性的给定值来定位项目。
/* Les éléments <a> avec un attribut title */
a[title] {
color: purple;
}</a>
/* Les éléments <a> avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
color: green;
}</a>
/* Les éléments <a> dont href contient "example" */
a[href*="example"] {
font-size: 2em;
}</a>
/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] {
font-style: italic;
}</a>
[attr]- 允许您定位具有属性的项目
attr。 [attr=valeur]- 允许您定位具有属性
attr且其属性值正好的元素valeur。 [attr~=valeur]- 允许您定位具有属性的元素，其属性
attr值是由白色分隔的单词列表，其中一个是完全正确的valeur。 [attr|=valeur]- 允许您定位具有属性的元素，该属性
attr的值为该属性valeur的值，或者其值valeur紧跟在连字符后面（U + 002D）。这可以特别用于与语言代码匹配。 [attr^=valeur]- 允许您定位一个具有属性
attr且其第一个值以开头的元素valeur。 [attr$=valeur]- 允许您定位具有属性
attr且最后一个值以valeur。结尾的元素。 [attr*=valeur]- 允许您定位具有属性
attr且其值至少包含一个包含字符串的元素的元素valeur。 [attr operateur valeur i]- 可以在结束钩子之前添加一个
i（或I）。在这种情况下，将不考虑该情况（对于包含在ASCII间隔中的字符）。
示例
/* Tous les spans qui ont un attribut "lang"
seront en gras. */
span[lang] {font-weight:bold;}
/* Tous les spans qui sont en portugais seront
en vert */
span[lang="pt"] {color:green;}
/* Tous les spans en anglais américain sont bleus */
span[lang~="en-us"] {color: blue;}
/* Tous les spans en chinois seront en rouge, que
ce soit du chinois simplifié (zh-CN) ou
traditionnel (zh-TW) */
span[lang|="zh"] {color: red;}
/* Tous les liens internes auront un fond doré */
a[href^="#"] {background-color: gold;}
/* Tous les spans dont la première classe commence par "main"
auront un fond jaune. */
/* Les spans avec la classe class="banner main" ne seront
pas affectés. */
span[class^="main"] {background-color: yellow;}
/* Tous les liens dont les URL terminent par ".cn"
seront rouges */
a[href$=".cn"] {color: red;}
/* Tous les liens dont l'url contient "example"
auront un fond gris */
a[href*="example"] {background-color: #CCCCCC;}
/* Tous les champs email auront une bordure bleue */
/* Toutes les capitalisations de email fonctionneront
"email", "EMAIL", "eMaIL", etc. */
input[type="email" i] {border-color: blue;}
<div class="hello-example"><a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span></div>
<div class="hello-example"><a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span></div>
<div class="hello-example"><a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好！</span></div>
<div class="hello-example"><a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好！</span></div>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259336.html