html 层次选择器,5.CSS层次选择器-CSS进阶

五、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。