CSS家系选择器

HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

1. 父元素：直接包裹某个元素的元素，就是该元素的父元素。
2. 子元素：被父元素直接包含的元素。
3. 祖先元素：父亲的父亲......，一直往外找，都是祖先。
4. 后代元素：儿子的儿子......，一直往里找，都是后代，子元素也是后代元素。
5. 兄弟元素：具有相同父元素的元素，互为兄弟元素。

后代选择器

作用：选中指定元素中，符合要求的后代元素。

语法：选择器1 选择器2 选择器3 ...... 选择器n {}

    <style>
        ul li {
            color: red;
        }
        ol li {
            color: green;
        }
        ul li a {
            color: orange;
        }
        ol li a {
            color: gray;
        }
        .subject li.front-end {
            color: blue;
        }
        .subject div.front-end {
            color: chocolate;
        }
    </style>

   <ul>
        <li>
            <a href="#">标签</a>
        </li>
    </ul>
    <hr>
    <ol>
        <li>标签</li>
        <li>标签</li>
        <li>
            <a href="#">标签</a>
        </li>
    </ol>
    <hr>
    <ol class="subject">
        <li class="front-end">标签</li>
        <div class="front-end">标签</div>
    </ol>

先写祖先元素再写后代元素，按路径找到后代元素。

子代选择器

作用：选中指定元素中，符合要求的子元素 选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

   <style>
        div>a {
            color: red;
        }
        div>p>a{
            color: skyblue;
        }
        .foot>a {
            color: chocolate;
        }
    </style>

<div>
        <a href="#">张三</a> 
        <a href="#">李四</a> 
        <a href="#">王五</a> 
        <p>
            <a href="#">赵六</a>
            <div class="foot">
                <a href="#">孙七</a>
            </div>
        </p>
    </div>

子代选择选择的只有子代，子代的后代不再被选择，而后代选择器全部后代都会被选择。

兄弟选择器

分为相邻和通用两种。

相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。

    <style>
        /*相邻兄弟选择器*/
         div+p {
            color: red;
        } 
    </style>

只有下一个兄弟元素会被选中。

通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素

        /* 选中div后所有的兄弟p元素—— 通用兄弟选择器 */
        div~p {
            color: red;
        }
        li~li {
            color: orange;
        }

只有下面的兄弟元素会被选中。

兄弟选择器只会选择自己下面的兄弟元素，不包括自己本身。