css选择器就是把你想要的标签选中的一种方式,把他选中,你才能操作标签的才能操作css样式。css中提供了很多将标签选中的方式,这些不同的方式就是不同的选择器。
css入门阶段,了解以下几种选择器即可。
- 元素选择器
- ID选择器
- class选择器
- 群组选择器
- 层次选择器
这里着重介绍一下层次选择器
层次选择器,指的是通过元素之间的层次关系来选择元素。层次选择器在实际开发中相当的重要。常见的层次关系包含父子、后代、兄弟、相邻等关系。
在css中,层次选择器共有4种,如表1-4所示
选择器 | 说明 |
---|---|
M N | 后代选择器,选择M元素内部后代的N元素(所有N元素) |
M>N | 子代选择器,选择M元素内部子代的N元素(所有第一级N元素) |
M~N | 兄弟选择器,选择M元素后所有的同级N元素 |
M+N | 相邻选择器,选择M元素相邻的下一个N元素(M、N是同级元素) |
1.5.1 后代选择器
后代选择器用于选中元素内部的某一个元素,包括子元素和其他后代元素。
语法 M N{ }
说明 在后代选择器中,M元素和N元素之间用空格隔开,表示选中M元素内部后代的N元素(所有N元素)。
1.5.2 子代选择器
子代选择器用于选中元素内部的某一个子元素。子代选择器和后代选择器很相似,但是二者有很大的区别。
- 后代选择器,选中的是元素内部所有的元素(包括子元素)。
- 子代选择器,选中的是元素内部某一个子元素(只限子元素)。
语法 M>N{ }
说明 在子代选择器中,M元素和N元素之间用“>”隔开,表示选中M元素内部的子元素N。自带选择器只选中子元素不包括其他后代元素。
1.5.3 兄弟选择器
兄弟选择器用于选中元素后面(不包括前面)的某一类兄弟元素。
语法 M~N{ }
说明 在兄弟选择器中,M元素和N元素之间用“~”选择符,表示选中M元素后面的所有某一类兄弟元素N。兄弟选择器只选中后面的所有兄弟元素,不包括前面的所有兄弟元素。
1.5.4 相邻选择器
相邻选择器,用于选中元素后面(不包含前面)的某一个“相邻”的兄弟元素。相邻选择器跟兄弟选择器也非常的相似,不过二者之间有很明显的区别。
- 兄弟选择器选中元素后面“所有”的某一类元素。
- 相邻选择器选中元素后面“相邻”的某一个元素。
语法 M+N{ }
说明 在相邻选择器中,M元素和N元素之间用“+”选择符,表示选中M元素后面的某一个相邻的兄弟元素。
在实际开发过程中,需要两两元素实现什么效果,经常会用到这个技巧。如下图的网页底部信息栏。