选择器种类繁多,有时候用着就忘记了,就知道加class
,不知道使用其他方式。
选择器分类
- 标签选择器
- 类(class)选择器
- id选择器
4. 属性选择器
4.1简单属性选择器
根据属性的存在来选择
4.2 具体属性值选择器
element['attr'="value"]
4.3 部分属性值选择器
根据属性值(各值之间用空格隔开)的一部分来选择元素。
4.4 开始子串属性值选择器
element[attr^="value"]
4.5 结束子串属性值选择器
element[attr$="substring"]
4.6 任意子串属性值选择器
element[attr*="substring"]
4.7 语言属性选择器
element[attr|= "value"]
这个地方有些书本写的是语言属性选择器,因为主要应用场景是语言属性。
也有其他方面的用途。
可以用来匹配属性中用连字符的前缀。
<body>
<p title='xsl'>卡卡卡卡卡阿卡</p>
<p title='xsla'>卡卡卡卡卡阿卡</p>
<p title='xsl-a'>卡卡卡卡卡阿卡</p>
<p title='axsl'>卡卡卡卡卡阿卡</p>
</body>
使用|=
p[title|="xsl"]{
background-color: red;
}
这个选择器只匹配属性值为 xsl
或者属性值以 xsl-
开头的。
注意子串前缀选择器的比较如下:
使用^=
p[title^="xsl"]{
background-color: red;
}
6. 文档结构选择器
- 后代选择器
- 子代选择器
- 兄弟选择器