CSS [attribute~=value] 选择器


实例

选择 titile 属性包含单词 "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>
  11. <p>标题属性包含单词“flower”的 img 将获得黄色边框。</p>
  12. <img src="/images/klematis.jpg" title="klematis flower" width="150" height="113">
  13. <img src="/images/img_flwr.gif" title="flowers" width="224" height="162">
  14. <img src="/images/landscape.jpg" title="landscape" width="160" height="120">
  15. </body>
  16. </html>

浏览器支持

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

选择器
[attribute~=value]4.07.02.03.19.6

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


定义和用法

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


相关页面

CSS 教程:CSS 属性选择器

分类导航