【16】CSS基础（2）——选择器②高级选择器

目录#接上篇

产生背景：
由于基础选择器不能实现所有选择情况，比如：不想选择所有标签…class标签定义过多…如何：尽量少的类名还能尽量选择多的标签?所以后期在基础选择器的基础上衍生出了几种高级选择器。
组成：
高级选择器的组成部分是基础选择器。

★高级选择器★

(一）后代选择器

1.含义及示例：

（1）也叫包含选择器；
（2）通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器；
（3）★书写方式∶空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
（4）选择范围∶ 通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
★注意∶ 后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系，只要前面的是后面的祖先级即可。

示例


<DOCTYPE html>
<html>
    <head>
       <title>后代选择器/包含选择器示例</title>
       <style> .usual .exercise .run {
      font-size: 24px;/*字号*/ color: blue; /*字体颜色*/ } .usual .diet p {
      color: red; /*字体颜色*/ } .usual p {
      /* 后代关系不一定是"父子" */ font-weight: bold;/*字体加粗*/ } </style>
    </head>
    <body>
        <div class="usual">
            <div class="study">
               <p>今天真开心</p>
               <p>学习使我快乐</p>
               <p>继续加油</p>
            </div>
            <div class="exercise">
                <p>今天做了瑜伽</p>
                <p class="run">跑了步</p>
            </div>
            <div class="diet">
                <p>今天吃了大盘鸡</p>
                <p>喝了胡萝卜汁</p>
            </div>
        </div>
    </body>
</html>

2.特点

优点∶
减少class 属性的定义使用，选择效率更高。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

(二）交集选择器

1.含义及示例：

（1）通过一个标签之上满足所有的基础选择器的需求去选择标签；
（2）★书写方式∶基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头；
★交集选择器更多写法：
①交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签；
②IE6 不支持类名连续交集写法。
（3）选择范围∶选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中；（跟数学中的交集概念一样）

（4）比较常见的是标签与类的交集。

示例


<DOCTYPE html>
<html>
    <head>
       <title>交集选择器示例</title>
       <style> p.carrot {
      color:coral; /*字体颜色*/ } p.eat.chicken {
      /*类名的连续交集*/ color: red; } div.exercise {
      font-weight: bold; /*字体加粗*/ } .usual .study p.fun {
      /*最为其它高级选择器（后代选择器）的组成部分*/ color: pink; } </style>
    </head>
    <body>
        <div class="usual">
            <div class="study">
               <p class="fun">今天真开心</p>
               <p>学习使我快乐</p>
               <p>继续加油</p>
            </div>
            <div class="exercise">
                <p>今天做了瑜伽</p>
                <p class="run">跑了步</p>
            </div>
            <div class="diet">
                <p class="eat chicken">今天吃了大盘鸡</p>
                <p class="eat carrot">喝了胡萝卜汁</p>
            </div>
        </div>
    </body>
</html>

2.特点/用途

（1）交集选择器可以作为其他高级选择器的组成部分。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -

（三）并集选择器

1.含义及示例：

（1）不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法；
（2）书写方式∶将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号；
（3）选择范围∶是所有的单独选择器选中的标签的并集集合。
示例

<DOCTYPE html>
<html>
    <head>
       <title>并集选择器示例</title>
       <style> .exercise,.run {
      color: red; } </style>
    </head>
    <body>
        <div>
            <div>
               <p >今天真开心</p>
               <p>学习使我快乐</p>
               <p>继续加油</p>
            </div>
            <div class="exercise">
                <p>今天做了瑜伽</p>
                <p class="run">跑了步</p>
            </div>
            <div>
                <p>今天吃了大盘鸡</p>
                <p>喝了胡萝卜汁</p>
            </div>
        </div>
    </body>
</html>

2.特点/用途

（1）如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法；
（2）可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。（如下图片段代码）

h2,body,ul,li,p {
     margin: 0;
     paddding: 0
}

★下篇继续：CSS基础（2）——选择器③选择器权重…