【前端】CSS-2022/7/21

复合选择器

交集选择器

• 作用：选中同时符合多个条件的元素
  • 相当于编程语言中的“且”
• 语法：选择器1选择器2选择器3选择器4{}
  • 把多个选择器并列写在一起即可
• 注意点：
  • 交集选择器中如果有元素选择器，必须使用元素选择器开头

例如：

HTML：

<h1 class="red">月夜忆舍弟</h1>
<h2 class="red">杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1 class="red">夜上受降城闻笛</h1>
<h2 class="red">李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

我想让class属性值为red的h1元素变为红色。

CSS：

h1.red{
    color: red;
}

并集选择器（选择器分组）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,选择器3,选择器4{}

例如，我同时给h1和h2元素设置为红色

<h1>月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1>夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

我们的CSS代码可以写成：

h1{
    color: red;
}
h2{
    color: red;
}

但这样做未免太麻烦了，我们可以使用并集选择器来优化一下代码：

h1,h2{
    color: red;
}

HTML元素关系

• 父元素:直接包含子元素的元素
• 子元素:直接被父元素包含的元素
• 祖先元素:直接或间接包含后代元素的元素，一个元素的父元素也是这个元素的祖先元素
• 后代元素:直接或间接被祖先元素包含的元素，一个元素的子元素也是这个元素的后代元素
• 兄弟元素:拥有相同父元素的元素叫做兄弟元素

关系选择器

子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素>子元素

例如：

我要为div的子元素span设为红色

HTML：

<div>
        <p>
            我是div的子元素，也是span的父元素
            <span>我是p的子元素，也是div的后代元素</span>
        </p>
        <span>我是p元素的兄弟元素，也是div的子元素</span>
</div>

CSS：

div>span{
    color: red;
}

不同的选择器可以适当的混合使用，比如：

HTML：

<div class="box1">
        <h1>月夜忆舍弟</h1>
        <h2>杜甫</h2>
        <p>戍鼓断人行，边秋一雁声。</p>
        <p>露从今夜白，月是故乡明。</p>
        <p>有弟皆分散，无家问死生。</p>
        <p>寄书长不达，况乃未休兵。</p>
</div>
<div class="box2">
        <h1>夜上受降城闻笛</h1>
        <h2>李益</h2>
        <p>回乐烽前沙似雪，受降城外月如霜。</p>
        <p>不知何处吹芦管，一夜征人尽望乡。</p>
</div>

我要让《月夜忆舍弟》（div.box1）的子元素h1变红

CSS：

div.box1>h1{
    color: red;
}

后代元素选择器

• 作用：选中指定元素的指定后代元素
• 语法：祖先元素 后代元素（祖先元素和后代元素间用空格隔开）

<div>
        <p>
            我是div的子元素，也是span的父元素
            <span>我是p的子元素，也是div的后代元素</span>
        </p>
        <span>我是p元素的兄弟元素，也是div的子元素</span>
</div>

我要让div的后代元素span变为红色

CSS：

div span{
    color: red;
}

兄弟元素选择器1

• 作用：选择指定元素的下一个指定兄弟元素
• 语法：一个指定元素+下一个指定兄弟元素

HTML：

<div>
    <p>
        我是div的子元素，也是span的父元素
        <span>我是p的子元素，也是div的后代元素</span>
    </p>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
    <span>我是p元素的兄弟元素，也是div的子元素</span>
</div>

CSS：

p+span{
    color: red;
}

效果：只选中了一个元素（p元素的下一个兄弟元素）

如果p元素和span元素中间有其他元素隔开了，那就不会选中任何元素，因为兄弟元素选择器必须是选中下一个元素，且是兄弟元素。

兄弟元素选择器2

• 作用：选中后面的所有指定兄弟元素
• 语法：上~下

不演示，它也是兄弟元素选择器，但选中的范围更广，要求也没那么多。