参考手册
CSS 选择器
CSS 元素选择器
CSS ID 选择器详解
返回 CSS 选择器

CSS 属性选择器

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a[target] {
  6.   background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute] 选择器</h1>
  14. <p>带有 target 属性的链接获得颜色背景：</p>
  16. <a href="https://cankaoshouce.com">cankaoshouce.com</a>
  17. <a href="https://www.baidu.com" target="_blank">baidu.com</a>
  18. <a href="https://www.wikipedia.org" target="_top">wikipedia.org</a>
  20. </body>
  21. </html>
运行一下

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a[target=_blank] {
  6.   background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute="value"] 选择器</h1>
  13. <p>target="_blank" 的链接会有黄色背景：</p>
  15. <a href="https://cankaoshouce.com">cankaoshouce.com</a>
  16. <a href="https://www.baidu.com" target="_blank">baidu.com</a>
  17. <a href="https://www.wikipedia.org" target="_top">wikipedia.org</a>
  19. </body>
  20. </html>
运行一下

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [title~=flower] {
  6.   border: 5px solid yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute~="value"] 选择器</h1>
  13. <p>title 属性包含 "flower" 的所有图像会有黄色边框。</p>
  15. <img src="/images/klematis.jpg" title="klematis flower" width="150" height="113">
  16. <img src="/images/flower.gif" title="flower" width="224" height="162">
  17. <img src="/images/tree.png" title="tree" width="200" height="358">
  19. </body>
  20. </html>
运行一下

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素：

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [class|=top] {
  6.   background: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute|="value"] 选择器</h1>
  14. <h1 class="top-header">Welcome</h1>
  15. <p class="top-text">Hello world!</p>
  16. <p class="topcontent">Are you learning CSS?</p>
  18. </body>
  19. </html>
运行一下

CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素：

提示：模糊匹配！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [class^="top"] {
  6.   background: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute^="value"] 选择器</h1>
  14. <h1 class="top-header">Welcome</h1>
  15. <p class="top-text">Hello world!</p>
  16. <p class="topcontent">Are you learning CSS?</p>
  18. </body>
  19. </html>
运行一下

CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 "test" 结尾的所有元素：

提示：值不必是完整单词！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [class$="test"] {
  6.   background: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute$="value"] 选择器</h1>
  14. <div class="first_test">第一个 div 元素.</div>
  15. <div class="second">第二个 div 元素.</div>
  16. <div class="my-test">第三个 div 元素.</div>
  17. <p class="mytest">这个是段落里面的文本.</p>
  19. </body>
  20. </html>
运行一下

CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 "te" 的所有元素：

提示：模糊匹配！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [class*="te"] {
  6.   background: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>CSS [attribute*="value"] 选择器</h1>
  14. <div class="first_test">第一个 div 元素.</div>
  15. <div class="second">第二个 div 元素.</div>
  16. <div class="my-test">第三个 div 元素.</div>
  17. <p class="mytest">这个是段落里面的文本.</p>
  19. </body>
  20. </html>
运行一下

设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 150px;
  7.   display: block;
  8.   margin-bottom: 10px;
  9.   background-color: yellow;
  10. }
  12. input[type=button] {
  13.   width: 120px;
  14.   margin-left: 35px;
  15.   display: block;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>添加表单样式</h1>
  23. <form name="input" action="" method="get">
  24.   姓氏:<input type="text" name="Name" value="埃隆" size="20">
  25.   名字:<input type="text" name="Name" value="马斯克" size="20">
  26.   <input type="button" value="Example Button">
  27. </form>
  29. </body>
  30. </html>
运行一下

提示：请访问本站的 CSS 表单教程，学习如何用 CSS 设置表单样式的更多知识。

所有 CSS 属性选择器

选择器例子例子描述
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value][title~=flower]选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value][lang|=en]选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]a[href^="https"]选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[href$=".pdf"]选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute=value]a[href="cankaoshouce"]选择其 href 属性值包含子串 "cankaoshouce" 的每个 <a> 元素。
CSS 元素选择器
CSS ID 选择器详解

分类导航