点击刷新
css属性选择器有哪些？
[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;
}当然，复杂一点，我们可以搭配不仅仅一个 :not()伪类，像是这样，可以同时多个配合使用，选择一个 href, target, rel 属性都没有的 a 标签：
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>
© 著作权归作者所有
发表评论
