【前端】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;
}

照这样,我们也可以写:h1#red(选中id属性值为red的h1元素),这样是没有问题的,但前面提到过id属性值是唯一的,那我们就没有必要再写元素选择器了,可以但是没有必要。

并集选择器(选择器分组)

  • 作用:同时选择多个选择器对应的元素
  • 语法:选择器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

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

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

这些关系选择器很杂,在开发的时候用的也不多,想选中一个元素,用class或者id选择器是最简单的办法了。

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论