# CSS 选择器
CSS选择器是CSS规则的一部分，位于CSS声明块前，决定了定义的样式规则会被应用到哪些DOM元素上。
本文内容建议配合demo食用：https://github.com/Raaabbit/MyNotes/tree/master/CSS%E9%80%89%E6%8B%A9%E5%99%A8
这个例子展示了最基本的id选择器、class选择器和标签选择器：
#app{
width: 300px;
margin: 10px auto;
background-color: #eeeeee;
border-radius: 30px 30px;
padding: 100px;
}
.demo-list{
color: blueviolet;
font-size: 30px;
}
p{
display: inline;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 简单选择器
所谓的简单选择器就是上面的例子中的三种：id选择器、class选择器和标签选择器，除此之外还有一个不怎么常用的通配符选择器
*{
margin:0;
padding:0;
}
1
2
3
4
2
3
4
这个选择器下的样式可以选择所有的DOM元素，同时优先级和效率都相对更低，不太常用。
注：
- 类选择器匹配类名，以
.开头，类名必须以字母开头（我习惯用-分割而不用_），区分大小写 (这个好像没什么用)
# 属性选择器
当元素设置了属性时匹配（比如 button 元素的 disabled ）就可以通过属性进行匹配。有两种不同的类型，请看下面的例子：
/* 第一种 [attr] */
[disabled]{
background-color: #ccc;
}
/* 第二种 [attr=val] */
[type='button']{
background-color: #ccc;
}
/* 第三种 [attr~=val] 属性包含val */
[class~='test']{
color:red;
}
/* 第四种 [attr^=val] 属性以val开头 */
[class^='demo']{
background-color:red;
}
/* 第五种 [attr|=val] 属性以 val- 开头 */
[class|='demo']{
background-color:red;
}
/* 第六种 [attr$=val] 属性以 val 结尾 */
[class$='item']{
font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
**注：**第一种不管属性值是什么都能匹配到，就比如上面的 disabled 无论是 true 还是 false 都会匹配到。
另外我感觉第四、五、六种都没什么用，，，，
# 伪类
定义： 伪类根据元素的特征分类，而不是名字、属性或者内容。
定义太生硬了，下面是例子：
/* 伪类选择器 */
#app:hover{
border:2px solid #aaccaa;
}
1
2
3
4
2
3
4
常见的伪类选择器：
| 伪类选择器 | 功能 |
|---|---|
| :hover | 鼠标移入元素上方 |
| :focus | 元素获得焦点 |
| :checked | 选中的表单元素 |
| :empty | 没有任何子元素的元素 |
| :optional | 表单元素中可以为空的元素 |
| :read-only | 只读属性的元素 |
| :read-write | 没有只读属性的元素 |
| :required | 选择表单必填项的元素 |
| :valid | 选择所有有效值的元素 |
| :target | 当前活动元素 |
| :root | 匹配到文档根元素 |
| :enabled | 匹配到页面上可用状态的元素 |
| :disabled | 匹配到不可用的元素 |
| :first-child | 匹配到一个作为第一个子元素的元素 |
| :last-child | 匹配到一个作为最后一个子元素的元素 |
| :nth-child(n) | 匹配父元素的第n个子元素（允许食用乘法因子n作为换算） |
| :nth-last-child(n) | 匹配父元素的倒数第n个子元素 |
| :link | 没有访问过的链接 |
| :visited | 访问过的链接 |
# 伪元素选择器
定义： 伪元素建立了对超出文档语言指定的文档树的抽象。
| 伪元素选择器 | 功能 |
|---|---|
| ::first-letter | 选择元素的第一个字母 |
| ::first-line | 选择元素的第一行 |
| ::before | 在元素之前插入内容并定制样式 |
| ::after | 在元素之后插入内容并定制样式 |
| ::selection | 被用户选中的内容 |
# 组合选择器
组合选择器是通过多个简单选择器进行组合
- 后台选择器：A B，作用于A的子代孙代所有B
- 子代选择器：A>B，作用于A的子代的B
- 相邻元素选择器：A+B，作用于紧邻于A后的B
- 同级元素选择器：A~B，作用于A后面的所有同级的B
# 选择器优先级
浏览器会根据选择器优先级来决定给元素使用什么样式，并解决冲突。
# 一般规则
内联样式 > ID选择器 > 伪类选择器=属性选择器=类选择器 > 标签选择器 > 通用选择器 > 继承样式
我们可以为他们赋予一个权值，然后在多个选择器同时存在时判断这段样式的优先级：
内联样式 -> 1000
ID属性值 -> 100
类属性值、属性选择或伪类 -> 10
元素或伪元素 -> 1
结合符和通配选择器 -> 0
1
2
3
4
5
2
3
4
5
比如选择器 div#side{} 的权值就是 101
# 优先级提升
末尾加上!important 的优先级最高
例子
div{
color:#000!important;
}
1
2
3
2
3