CSS选择器子选择器：与后代选择器 X Y 不同的是 X > Y子选择器只对X下的直接子级Y 起作用。如 p + s

X Y

后代选择器：div ul 选择的是div元素下面所有的ul

<style>
    div#contaner  ul{
        border: 1px solid blue;
    }
</style>
<div id="contaner">
    <ul>
        <li>第一层</li>
        <li>
            <ul>
                <li>inner</li>
                <li>inner</li>
            </ul>
        </li>
    </ul>
</div>

效果：

X > Y

子选择器：与后代选择器 X Y 不同的是 X > Y子选择器只对X下的 直接子级Y 起作用。

  div#contaner > ul{
      border: 1px solid blue;
  }

效果：

X + Y

相邻选择器：X元素后面第一个Y元素
如 p + span p元素后面第一个必须是span才起作用。

<style>
    p + span{
        color: red;
    }
</style>
<div class="contaner">
    <a href="">我是a标签啊</a>
    <span>我是上面的</span>
    <p class="label">lable</p>
    <span>我是小标题</span>  //会变为红色
    <span>我也是</span>
</div>

X ~ Y

相邻选择器：X后面同级元素 Y；即使Y没有挨着X元素
p ~ span 在 p 元素后面与 p 元素同级的span

<style>
    p ~ span{
        color: red;
    }
</style>
<div class="contaner">
    <a href="">我是a标签啊</a>
    <span>我是上面的</span>
    <p class="label">lable</p>
    <a href="">我是第一个</a>
    <span>我是小标题</span>  //会变为红色
    <span>我也是</span>  //会变为红色
</div>

nth-child 与 nth-of-type

.container span:nth-child(2){} 指的是 container类下面的第二个子元素是span标签的样式；
.container span:nth-of-type(2){} 指的是 container类下面span 类型的第二个元素的样式；

    <style>
        .container span:nth-child(2){
            color: red;
        }
        .container span:nth-of-type(2){
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="">我是a标签啊</a>
    <span>我是上面的</span>
    <p class="label">lable</p>
    <a href="">我是第一个</a>
    <span>我是小标题</span>
    <span>我也是</span>
</div>