CSS选择器
#
# 选择器
- 什么是 CSS 选择器：按照一定的规则选出符合条件的元素，为之添加 CSS 样式
- 选择器的种类
- 通用选择器
- 元素选择器
- 类选择器
- id 选择器
- 属性选择器
- 组合
- 伪类
- 伪元素
# 通用选择器
使用通用选择器，所有的元素都会被选中
使用*实现通用选择器
缺点：效率很低
* {
margin: 0;
padding: 0;
}
/**通配符选择器的推荐写法 */
body,
p,
div,
button {
mnargin: 0;
padding: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
使用场景：一般用来给所有元素做一些通用性的设置，比如内边距，外边距；比如重置一些内容
# 简单选择器
简单选择器是开发中最常使用的选择器
- 元素选择器，使用元素的名称
- 类选择器，使用 class 名称
- id 选择器， 使用 id 名称
# 属性选择器
- 拥有某一个属性的方式 [att]
[title] {
color: red;
}
1
2
3
2
3
- 属性等于某个值 [att=val]
[title="box"] {
color: red;
}
1
2
3
2
3
- 属性值包含某一个值 val [attr*=val]
- 属性值以 val 开头 [attr^=val]
- 属性值以 val 结尾 [attr$=val]
- 属性值等于 val 或者以 val 开头后紧跟连接符 [attr|=val]
- 属性值包含 val,如果有其他值必须以空格和 val 分割 [attr~=val]
# 后代选择器
所有的后代(直接/间接的后代)
选择器之间使用空格分开，其后代对应的子元素全部被选中
<div class="box">
<span>子元素一</span>
<div>
<span>子元素二</span>
</div>
</div>
<style>
.box span {
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
直接子代选择器(必须是直接子代)
选择器之间使用>分割
.box > span {
color: red;
}
1
2
3
2
3
# 兄弟选择器
相邻兄弟选择器
使用+连接
<style>
.one+div{
color: red;
}
</style>
<div class="one">1</div>
<div>2</div>
<div>3</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
普遍兄弟选择器
使用~连接
<style>
.one~div{
color: red;
}
</style>
<div class="one">111111</div>
<div>222222</div>
<div>333333</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 交集选择器
同时符合两个选择器条件
<style>
div.one{
color: red;
}
</style>
<div class="one">111111</div>
<div>222222</div>
<div>333333</div>
<p class="one">1233333</p>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 并集选择器
当需要给多个元素设置相同的样式时使用并集选择器
<style>
.one,.two{
color: red;
}
</style>
<div class="one">111111</div>
<div>222222</div>
<div>333333</div>
<p class="two">1233333</p>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上次更新: 2022/07/04, 08:35:01