CSS选择器笔记

1. 简单选择器

1.1 标签选择器

p {color: red}

1.2 类选择器

.first {color: red}

1.3 ID选择器

#polite {color: red}

1.4 通用选择器

* {color: red}

 

2. 属性选择器

2.1 存在和值属性选择器

[attr] : 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何
[attr=val] : 该选择器仅选择 attr 属性为 val 的所有元素（不能还有其他属性）
[attr~=val] : 该选择器选择 attr 属性中包含 val 的元素

2.2 子串值属性选择器

[attr|=val] : 选择 attr 属性的值是 val 或值以 val- 开头的元素
[attr^=val] : 选择 attr 属性的值以 val 开头的元素（包括 val 值）
[attr$=val] : 选择 attr 属性的值以 val 结尾的元素
[attr*=val] : 选择 attr 属性的值中包含子字符串 val 的元素

 

 

3. 伪类和伪元素

3.1 伪类

a:hover {color: darkred;}

3.2 伪元素

[href^=http]::after {content: '⤴';}

 

 

4. 组合器和多用选择器

Combinators	Select
A, B	匹配满足A、B的任意元素
A B	匹配 B 是 A 的后代节点
A > B	匹配 B 是 A 的直接子节点
A + B	匹配 B 是 A 的下一个兄弟节点
A ~ B	匹配 B 是 A 之后的兄弟节点中的任意一个