五、CSS选择器
选择器,就是用一种方式把我们想要的那一个标签选中。把它选中了,你才能操作这个标签的CSS样式。
CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。
在2.CSS选择器-CSS基础中我们学习了以下几种选择器:
元素选择器
id选择器
class选择器
群组选择器
这些都是CSS中最基本的选择器。
层次选择器,就是通过元素之间的层次关系来选择元素。
层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代、兄弟和相邻。
CSS层次选择器
选择器
说明
M N
后代选择器,选择M元素内部后代N元素(所有的N元素)
M>N
子代选择器,选择M元素内部子代N元素(所有第1级N元素)
M~N
兄弟选择器,选择M元素后所有的同级N元素。
M+N
相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素)
1.后代选择器
后代选择器:选中元素内部中所有的指定的某个元素,包括子元素和其它后代元素。
(1)语法格式
M N{}
① 说明
M元素和N元素之间用空格隔开,表示选中M元素内部所有N元素后代。
(2)示例
① 例1
CSS层次选择器/*后代选择器*/
#first p{
color:#FFC0CB;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
后代选择器示例11.png
2.子代选择器
子代选择器:选中元素内部的某一个子元素,只限子元素。
和后代选择器很相似,但却有不同。
(1)语法格式
M>N{}
① 说明
M元素和N元素之间用 > 隔开,表示选中M元素内部的子元素N。
(2)子代选择器与后代选择器区别
后代选择器,选取的是元素内部所有的元素,包括子元素。
子代选择器,选取的是元素内部某一个元素,只限子元素。
(3)示例
① 例1
CSS层次选择器/*子代选择器*/
#first>p{
color:#FFC0CB;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子代选择器示例1.png
3.兄弟选择器
兄弟选择器:选中元素后面(不包括前面)的某一类兄弟元素(同级)。
(1)语法格式
M~N{}
① 说明
M元素和N元素之间用 ~ 隔开,表示选中 M 元素后面的所有某一类兄弟元素 N。
(2)示例
① 例1
CSS层次选择器/*兄弟选择器*/
#second ~ p{
color:greenyellow;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子元素:
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
兄弟选择器示例1.png
4.相邻选择器
相邻选择器:选中元素后面(不包括前面)的某一个相邻的兄弟元素(同级)。
相邻选择器与兄弟选择器也很像。
(1)语法格式
M+N{}
① 说明
M元素和N元素之间用 + 隔开,表示选中 M 元素后面某一个相邻的兄弟元素 N。
(2)相邻选择器与兄弟选择器区别
兄弟选择器,选中元素后面所有的某一类元素。
相邻选择器,选中元素后面相邻的某一个元素。
(3)示例
① 例1
CSS层次选择器/*相邻选择器*/
#second + p{
color:greenyellow;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子元素:
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
相邻选择器示例1.png
② 例2
CSS层次选择器*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-top:2px solid #FFD700;
}
- 第 1 li元素
- 第 2 li元素
- 第 3 li元素
- 第 4 li元素
- 第 5 li元素
相邻选择器示例2.png
(4)实际开发
在两个列表项之间使用相邻选择器是一个非常棒的技巧,在实际开发中如果我们想要在两个元素之间实现什么效果(例如:border、 margin等),我们会经常用到这个技巧!
一定要重点掌握。
① 例1
CSS层次选择器*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none;
}
li{
float: left; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-left:2px solid #FFD700;
}
- 第 1 li元素
- 第 2 li元素
- 第 3 li元素
- 第 4 li元素
- 第 5 li元素
相邻选择器示例3.png
(5)关于CSS3
到目前为止,我们已经学习了 8 种选择器,其实还有非常多重要的选择器,但大部分都是CSS3新增的。
CSS3非常强大,能实现非常多很棒的效果,以后一定要去学习一下CSS3。