就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. Attribute selectors

在此页

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]
添加 i (或 I ) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
[ attr operator value s]
添加 s (或 S ) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

范例

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>

结果

语言

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 上的兼容性数据
桌面 移动
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 .

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

另请参阅

元数据

  • 最后修改：
  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. 子级组合器
    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