CSS 选择器 - Attribute selectors

Attribute selectors

此选择器，基于元素的属性和属性值以匹配网页元素。这种选择器可以被分为两类：

Presence and value attribute selectors

这种选择器试图精确匹配元素属性。

[attr]：此选择器会选择所有包含此属性名称(方括号中为属性名称)的网页元素，且不理会此属性的值。

[attr=val]：此选择器会选择所有包含此属性名称，且属性值为指定值的网页元素。

[attr~=val]：此选择器会选择所有包含此属性名称，且以空格分隔的属性值列表中，包含此指定值的网页元素。

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green;
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

Substring value attribute selectors

[attr^=val]：此选择器，匹配此属性名称，且属性值以此指定值开头的网页元素。

[attr$=val]：此选择器，匹配此属性名称，且属性值以此指定值结束的网页元素。

[attr*=val]：此选择器，匹配此属性名称，且属性值包含此指定值的网页元素。

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* Classic usage for language selection */
[lang|="fr"] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the substring "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

[attr]

表示有此属性名称的网页元素。

[attr=value]

表示有此属性名称，且属性值为此值的网页元素。

[attr~=value]

表示有此属性名称，且以空格分隔的属性值列表中，为此值的网页元素。

[attr|=value]

表示有此属性名称，且属性值为此值，或者属性值为：value-，的网页元素。这种形式常用于匹配语言。例如：zh-cn zh-tw en-us

[attr^=value]

表示有此属性名称，且属性值以此值开头的网页元素。

[attr$=value]

表示有此属性名称，且属性值以此值结束的网页元素。

[attr*=value]

表示有此属性名称，且属性值包含此值的网页元素。

[attr operator value i]

在方括号中结尾处，添加此字母，表示此属性选择器，对于字母大小写不敏感。

[attr operator value s]

在方括号中结尾处，添加此字母，表示此属性选择器，对字母大小写敏感。

示例：

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}