CSS [attribute^=value] 选择器


实例

设置 class 属性值以 "test" 开头的所有 div 元素的背景色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div[class^="test"] {
  6. background: #ffff00;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="first_test">第一个div元素。</div>
  12. <div class="second">第二个div元素。</div>
  13. <div class="test">第三个div元素。</div>
  14. <div class="test_ex">第四个div元素。</div>
  15. <p class="test">这是一个段落。</p>
  16. <p class="test_ex">这是一个段落。</p>
  17. </body>
  18. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

选择器
[attribute^=value]4.07.03.53.29.6

注释:对于 IE8 及更早版本的浏览器中的 element>element,必须声明 <!DOCTYPE>


定义和用法

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。


实例

设置 class 属性值以 "test" 开头的所有元素的背景色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. [class^="test"] {
  6. background: #ffff00;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="first_test">第一个div元素。</div>
  12. <div class="second">第二个div元素。</div>
  13. <div class="test">第三个div元素。</div>
  14. <div class="test_ex">第四个div元素。</div>
  15. <p class="test">这是一个段落。</p>
  16. <p class="test_ex">这是一个段落。</p>
  17. </body>
  18. </html>

相关页面

CSS 教程:CSS 属性选择器

分类导航