CSS 属性选择器即是通过 html 的属性来选择元素, 可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.
[attribute] 用于选取带有指定属性的元素.
该选择器选择包含 attribute 属性的所有元素, 不论 attribute 的值为何.
[attribute=value] 用于选取带有指定属性和值的元素.
该选择器仅选择 attribute 属性被赋值为 value 的所有元素.
[attribute~=value] 用于选取属性值中包含指定词汇的元素.
该选择器仅选择具有 attribute 属性的元素, 而且要求 value 值是 attribute 值包含的被空格分隔的取值列表里中的一个.
下面几个属于 CSS3 新增语法, 也被称为 "伪正则选择器", 因为它们提供类似 regular expression 的灵活匹配方式.
[attribute|=value] 用于选取带有以指定值开头的属性值的元素, 该值必须是整个单词.
选择 attribute 属性的值是 value 或值以 value- 开头的元素(注意, 这里的 "-" 不是一个错误, 这是用来处理语言编码的).
[attribute^=value] 匹配属性值以指定值开头的每个元素.
选择 attribute 属性的值以 value 开头 (包括 val) 的元素.
[attribute$=value] 匹配属性值以指定值结尾的每个元素.
选择 attribute 属性的值以 value 结尾 (包括 value) 的元素.
[attribute*=value] 匹配属性值中包含指定值的每个元素.
选择 attribute 属性的值中包含子字符串 value 的元素(一个子字符串就是一个字符串的一部分而已, 例如,"cat" 是 字符串 "caterpillar" 的子字符串
CSS 属性选择器的最基本用法
属性选择器最基本的用法, 就是通过元素的属性值去选择 DOM 元素. 像这样, 将选中所有带 href 属性的 DOM 元素:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- p {
- width: 30vw;
- margin: 50px auto;
- font: 16px/2 sans-serif;
- }
- [href] {
- color: red;
- }
- </style>
- </head>
- <body>
- <p > 这里是一段描述性的文案, 里面有许多 a 标签, 链接了许多不同的网页.
- <a href="https://developer.mozilla.org/zh-CN/docs/web/CSS/Attribute_selectors">MDN - 属性选择器</a>
, 又或者其他的
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">
网页链接
- </a>.
- </p>
- </body>
- </HTML>
复杂一点点的用法
层叠选择
div [href]{ ... }
多条件复合选择
选择一个 img 标签, 它含有 title 属性, 并且包含类名为 logo 的元素.
- img[title][class~=logo]{
- ...
- }
伪正则写法
i 参数
忽略类名的大小写限制, 选择包含 class 类名包含子字符串为 text,Text,TeXt... 等情况的 p 元素. 这里的 i 的含义就是正则里面参数 i 的含义, ignore, 忽略大小写的意思.
- p[class*="text" i] {
- ...
- }
所以上面的选择器可以选中类似这样的目标元素:
- <p class="text">
- </p>
- <p class="nameText">
- </p>
- <p class="desc textarea">
- </p>
g 参数
与正则表达式不一样, 参数 g 在这里表示大小写敏感(case-sensitively). 然而, 这个属性当前仍未纳入标准, 支持的浏览器不多.
配合 :not() 伪类
还有一种比较常用的场景就是搭配 :not() 伪类, 完成一些判断检测性的功能. 譬如下面这个选择器, 就可以选取所有没有 [href] 属性的 a 标签, 添加一个红色边框.
- a:not([href]){
- border: 1px solid red;
- }
- a:not([href]):not([target]):not([rel]){
- border: 1px solid blue;
- }
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- body { padding: 30px; } a { font: 18px/1.5 sans-serif; margin-right: 20px;
- border: 1px solid black; padding: 5px; text-decoration: none; color: #000;
- } a:not([href]) { border: 1px solid red; } a:not([href]):not([target]):not([rel])
- { border: 1px solid blue; }
- </style>
- </head>
- <body>
- <a href="#">
- 非空 a 标签 "
- </a>
- <a target="_blank">
- target="_blank"
- </a>
- <a>
- 空 a 标签 "
- </a>
- </body>
- </HTML>
来源: http://www.css88.com/qa/css3/15498.html