在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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" */
a[class~="logo"] {
  padding: 2px;
}
					

句法

[ 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 (或 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 (或 S ) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

范例

Links

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;
}
/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}
					

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>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>
					

结果

Languages

CSS

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}
/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}
/* 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>
					

结果

HTML ordered lists

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

结果

规范

规范	状态	注释
Selectors Level 4 The definition of 'attribute selectors' in that specification.	工作草案	Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3 The definition of 'attribute selectors' in that specification.	推荐
CSS Level 2 (Revision 1) The definition of 'attribute selectors' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Attribute selector ( [attr=value] )	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 7	Opera 完整支持 9	Safari 完整支持 3	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
Case-insensitive modifier ( i )	Chrome 完整支持 49	Edge 完整支持 79	Firefox 完整支持 47	IE 不支持 No	Opera 完整支持 36	Safari 完整支持 9	WebView Android 完整支持 49	Chrome Android 完整支持 49	Firefox Android 完整支持 47	Opera Android 完整支持 36	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 5.0
Case-sensitive modifier ( s )	Chrome 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Edge 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Firefox 完整支持 66	IE 不支持 No	Opera 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Safari 不支持 No	WebView Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Chrome Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Firefox Android 完整支持 66	Opera Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .	Safari iOS 不支持 No	Samsung Internet Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 1041095 .

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

另请参阅

• attr()
• Selecting a single element: Document.querySelector() , DocumentFragment.querySelector() ，或 Element.querySelector()
• Selecting all matching elements: Document.querySelectorAll() , DocumentFragment.querySelectorAll() ，或 Element.querySelectorAll()
• The above methods are all implemented based on the ParentNode mixin; see ParentNode.querySelector() and ParentNode.querySelectorAll()

元数据

• 最后修改： 2020 年 7 月 29 日

相关话题

1. CSS
2. CSS 参考
3. CSS Selectors
4. 指南

   1. Using the :target pseudo-class in selectors
5. 特性

   1. 选择器列表
6. Basic Selectors

   1. Type selectors
   2. Class selectors
   3. ID selectors
   4. Universal selectors
   5. Attribute selectors
7. 组合器

   1. Adjacent sibling combinator
   2. General sibling combinator
   3. Child combinator
   4. Descendant combinator
   5. Column combinator
8. Pseudo-classes

   1. :active
   2. :any-link
   3. :checked
   4. :blank
   5. :default
   6. :defined
   7. :dir()
   8. :disabled
   9. :empty
   10. :enabled
   11. :first
   12. :first-child
   13. :first-of-type
   14. :fullscreen
   15. :focus
   16. :focus-visible
   17. :focus-within
   18. :has()
   19. :host()
   20. :host-context()
   21. :hover
   22. :indeterminate
   23. :in-range
   24. :invalid
   25. :is() (:matches(), :any())
   26. :lang()
   27. :last-child
   28. :last-of-type
   29. :left
   30. :link
   31. :not()
   32. :nth-child()
   33. :nth-last-child()
   34. :nth-last-of-type()
   35. :nth-of-type()
   36. :only-child
   37. :only-of-type
   38. :optional
   39. :out-of-range
   40. :placeholder-shown
   41. :read-only
   42. :read-write
   43. :required
   44. :right
   45. :root
   46. :scope
   47. :target
   48. :valid
   49. :visited
   50. :where()
9. Pseudo-elements

   1. ::-moz-progress-bar
   2. ::-moz-range-progress
   3. ::-moz-range-thumb
   4. ::-moz-range-track
   5. ::-webkit-progress-bar
   6. ::-webkit-progress-value
   7. ::-webkit-slider-runnable-track
   8. ::-webkit-slider-thumb
   9. ::after (:after)
   10. ::backdrop
   11. ::before (:before)
   12. ::cue
   13. ::cue-region
   14. ::first-letter (:first-letter)
   15. ::first-line (:first-line)
   16. ::grammar-error
   17. ::marker
   18. ::part()
   19. ::placeholder
   20. ::selection
   21. ::slotted()
   22. ::spelling-error