【前端学习之HTML&CSS】-- CSS第三篇 – 选择器（下）

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章将进入对于选择器的学习，选择器是帮助我们实现不同元素不同内容丰富多彩的样式的关键，上篇博客主要介绍了不同种类的选择器，这里我们主要聚焦于多种选择器的组合和并列，在实际的CSS样式书写中，我们更多的是通过层层的组合实现对元素的选择。

一、选择器的组合

1. 并且

• 多个选择器不加任何东西直接写到一起
  eg. span::before = span + ::before、a:active = a + :active、p.red = p + .red

    /* 常见p元素格式 */
    p {
        text-indent: 2em;
        line-height: 2;
    }
    /* 直接用red也可以 */
    p.red {
        color: red;
    }

    <!-- p.red.big.center -->
    <p class="red big center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

2. 后代元素（推荐）

• 空格，两个选择器之间加空格，精准的选择前一个选择器选择的元素中满足要求的后代元素；

    /* 后代元素 */
    /* 注意：p元素中不能有列表 */
    /* 选中了有pig类的元素中后代元素的li */
    .pig li {
        color: #008c8c;
    }

    <!-- 后代元素 -->
    <div class="pig">
        <ul>
            <!-- li*4>lorem5 -->
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Rem unde perferendis labore nihil!</li>
            <li>Itaque a pariatur quidem nisi?</li>
            <li>Atque beatae aut laboriosam sequi?</li>
        </ul>
    </div>

举个例子，精准选择：

    <div class="abc">
        <p>Lorem ipsum dolor sit amet.</p>
        <!-- 下面这个是想选择的 -->
        <p class="bcd">Consequuntur quibusdam placeat animi quos.</p>
        <p>Quisquam ea vitae quod eligendi.</p>
    </div>
    <p class="bcd">Lorem, ipsum dolor.</p>

    /* 选择有abd类的元素里后代元素中的有bcd类的p元素 */
    .abc p.bcd {
        color: red;
    }

3. 子元素 >

• 用法：与后代元素类似，就是只能选择该元素中满足要求的子元素；

    /* 子元素 */
    div>ul>li {
        color: #008c8c;
    }

    <!-- 子元素 -->
    <div>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Dolor repellendus ex praesentium illo?</li>
            <li>Qui praesentium officia vitae nulla.</li>
        </ul>
    </div>

4. 相邻兄弟元素 +

• 用法：选中某个特殊元素的下一个兄弟元素；

    /* 相邻兄弟元素 */
    .special {
        color: red;
    }
    /* 类为special的下一个元素颜色为马尔斯绿 */
    .special+li {
        color: black;
    }

    <!-- 相邻兄弟元素 -->
    <div>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Quos enim voluptate cupiditate hic.</li>
            <li class="special">Dolore error veritatis placeat facere?</li>
            <li>Possimus repudiandae quae quisquam et?</li>
            <li>Quae corrupti fuga dolorum officiis.</li>
            <li>Pariatur recusandae porro nesciunt voluptatum!</li>
        </ul>
    </div>

5. 兄弟元素 ~

• 用法：与上面的区别，就是它会把特殊元素后面所有的兄弟都选中；

二、选择器的并列

• 用法：多个选择器，用逗号分隔；

即样式相同的选择器，可以用逗号分隔，只写一个大括号表明样式
语法糖：方便记忆、书写

    p,div {
        color: #008c8c;
    }

总结

本篇博客我们一起学习了关于选择器的组合和并列等知识，将简单的选择器混合起来使用，起到精准选择对应元素的作用，在后续的学习中，我们将进一步了解选择器的优先级，包括层叠、继承等关系，并且从属性值出发，深刻体会选择器的优先顺序。