选择器可以被分为以下类别:
- 简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。
- 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。
- 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。
- 伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。
- 组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。
- 多用选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。
简单选择器
- 元素选择器
/* All p elements are red */
p {
color: red;
}
/* All div elements are blue */
div {
color: blue;
}
- 类选择器
文档中的多个元素可以具有相同的类名,而单个元素可以有多个类名(以空格分开多个类名的形式书写)
<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third">Link them all together</li>
</ul>
- id选择器
任何元素都可以使用id属性设置**唯一的**ID名称
- 通用选择器
它允许选择在一个页面中的所有元素
属性选择器
存在和值(Presence and value)属性选择器
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。子串值(Substring value)属性选择器
这种情况的属性选择器也被称为“伪正则选择器”,因为它们提供类似 regular expression 的灵活匹配方式(但请注意,这些选择器并不是真正的正则表达式):[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(-用来处理语言编码)。
[attr^=val] : 选择attr属性的值以val开头(包括 val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括 val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。