属性选择器允许您根据属性的存在或属性的给定值来定位项目。
/* 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>