css属性选择器

The CSS attribute selector matches elements based on the presence or value of a given attribute.

/* <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;
}

/* <a> elements whose class attribute contains the word "logo", same as a.logo */
a[class~="logo"] {
  padding: 2px;
}

SyntaxSection

[attr]

Represents elements with an attribute name of attr.

[attr=value]

Represents elements with an attribute name of attr whose value is exactly value.

[attr~=value]

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

[attr|=value]

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

[attr^=value]

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

[attr$=value]

Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

[attr*=value]

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

[attr operator value i]

Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

[attr operator value s] 

Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

ExamplesSection

LinksSection

CSS

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 with "cAsE" anywhere in the URL, 
with matching capitalization */ 
a[href*="cAsE" s] { 
  color: pink; 
}

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

HTML

<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>

Result

 

Open in CodePenOpen in JSFiddle

LanguagesSection

CSS

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */ 
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>

Result

 

Open in CodePenOpen in JSFiddle

HTML ordered listsSection

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HTML specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the typeattribute of an ordered list doesn't work without the case-sensitive modifier.

CSS

/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>