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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            /*后代选择器*/
            #first p{
                color:#FFC0CB;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <p>
                <strong>子元素：</strong>人生若只如初见
            </p>
            
            <div id="second">
                <p>
                    <strong>子元素的子元素：</strong>当时只道是寻常
                </p>
            </div>
            
            <p>
                <strong>子元素：</strong>越努力，越幸运。
            </p>
        </div>

    </body>
</html>

<!--
    #first p:会选中id为first元素的所有后代p元素。
-->

后代选择器示例11.png

2.子代选择器

子代选择器：选中元素内部的某一个子元素，只限子元素。和后代选择器很相似，但却有不同。

（1）语法格式

M>N{}

① 说明

M元素和N元素之间用 > 隔开，表示选中M元素内部的子元素N。

（2）子代选择器与后代选择器区别

后代选择器，选取的是元素内部所有的元素，包括子元素。
子代选择器，选取的是元素内部某一个元素，只限子元素。

（3）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            /*子代选择器*/
            #first>p{
                color:#FFC0CB;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <p>
                <strong>子元素：</strong>人生若只如初见
            </p>
            
            <div id="second">
                <p>
                    <strong>子元素的子元素：</strong>当时只道是寻常
                </p>
            </div>
            
            <p>
                <strong>子元素：</strong>越努力，越幸运。
            </p>
        </div>

    </body>
</html>
<!--
    #first p:会选中id为first元素的子元素p。
-->

子代选择器示例1.png

3.兄弟选择器

兄弟选择器：选中元素后面（不包括前面）的某一类兄弟元素（同级）。

（1）语法格式

M~N{}

① 说明

M元素和N元素之间用 ~ 隔开，表示选中 M 元素后面的所有某一类兄弟元素 N。

（2）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            /*兄弟选择器*/
            #second ~ p{
                color:greenyellow;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <p>
                <strong>子元素：</strong>人生若只如初见
            </p>
            
            <div id="second">
                <p>
                    <strong>子元素的子元素：</strong>当时只道是寻常
                </p>
            </div>
            
            <p>
                <strong>子元素：</strong>越努力，越幸运。
            </p>
            <p>
               <strong>子元素：</strong>
               男儿何不带吴钩，收取关山五十州。
               请君暂上凌烟阁，若个书生万户侯？
            </p>
        </div>

    </body>
</html>
<!--
    #second p:会选中id为second元素的所有兄弟元素p，且只选择second后面的兄弟元素，前面的兄弟元素不管。
-->

兄弟选择器示例1.png

4.相邻选择器

相邻选择器：选中元素后面（不包括前面）的某一个相邻的兄弟元素（同级）。相邻选择器与兄弟选择器也很像。

（1）语法格式

M N{}

① 说明

M元素和N元素之间用 + 隔开，表示选中 M 元素后面某一个相邻的兄弟元素 N。

（2）相邻选择器与兄弟选择器区别

兄弟选择器，选中元素后面所有的某一类元素。
相邻选择器，选中元素后面相邻的某一个元素。

（3）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            /*相邻选择器*/
            #second + p{
                color:greenyellow;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <p>
                <strong>子元素：</strong>人生若只如初见
            </p>
            
            <div id="second">
                <p>
                    <strong>子元素的子元素：</strong>当时只道是寻常
                </p>
            </div>
            
            <p>
                <strong>子元素：</strong>越努力，越幸运。
            </p>
            <p>
               <strong>子元素：</strong>
               男儿何不带吴钩，收取关山五十州。
               请君暂上凌烟阁，若个书生万户侯？
            </p>
        </div>

    </body>
</html>
<!--
    #second p:会选中id为second元素后面相邻的1个兄弟元素p。
-->

相邻选择器示例1.png

② 例2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            *{
                padding: 0;             /*去除所有元素的 padding和margin*/
                margin: 0;
            }
            ul{
                list-style-type:none;   /*去除列表默认符号*/
            }
    
            /*相邻选择器*/
            li+li{
                border-top:2px solid #FFD700;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>第 1 li元素</li>
            <li>第 2 li元素</li>
            <li>第 3 li元素</li>
            <li>第 4 li元素</li>
            <li>第 5 li元素</li>
        </ul>
    </body>
</html>

<!--
    “1i+li”使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。
    由于最后一个li元素没有相邻的下一个元素,所以对于最后一个元素,它是没有下一个l1元素可以选取的。
    “li+li{ border-top:2 px solid #FFD700;}”使得两个li元素之间添加一个边框的效果。
-->

相邻选择器示例2.png

（4）实际开发

在两个列表项之间使用相邻选择器是一个非常棒的技巧，在实际开发中如果我们想要在两个元素之间实现什么效果（例如：border、 margin等)，我们会经常用到这个技巧！一定要重点掌握。

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS层次选择器</title>
        <style type="text/css">
            *{
                padding: 0;     /*去除所有元素的 padding和margin*/
                margin: 0;
            }
            ul{
                list-style-type:none;
            }
            li{
                float: left;    /*去除列表默认符号*/
            }
            /*相邻选择器*/
            li+li{
                border-left:2px solid #FFD700;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>第 1 li元素&nbsp;&nbsp;</li>
            <li>第 2 li元素&nbsp;&nbsp;</li>
            <li>第 3 li元素&nbsp;&nbsp;</li>
            <li>第 4 li元素&nbsp;&nbsp;</li>
            <li>第 5 li元素</li>
        </ul>
    </body>
</html>

相邻选择器示例3.png

（5）关于CSS3

到目前为止，我们已经学习了 8 种选择器，其实还有非常多重要的选择器，但大部分都是CSS3新增的。 CSS3非常强大，能实现非常多很棒的效果，以后一定要去学习一下CSS3。