Web前端基础(七):CSS选择器进阶

1、后代选择器

  • 使用多个选择器的组合来找到要控制的标签;
  • 类名为wrap中的div里面的span标签样式;
  • 选择器直接用空格隔开。
/*样式如下:*/
.wrap div {
    background-color: skyblue;
}
<!-- 结构如下: -->
<div class="wrap">
    <div>01</div>
    <div>02</div>
</div>

效果解释:

  • 类名wrap的div内部两个子div都会有天蓝色背景

2、群组选择器

  • 把不同选择器中的css取出,减少代码冗余;
  • 选择器之间选择逗号隔开;
/*样式如下:*/
.wrap, .code {
    background-color: skyblue;
}
<!-- 结构如下: -->
<div class="wrap">01</div>
<div class="code">02</div>

效果解释:

  • 类名wrap的div和类名为code的div都会有天蓝色背景

3、毗邻选择器(X + Y)

  • 它将只选择紧贴在X元素之后Y元素。下面的例子,仅每一个ul之后的第一个段落元素p的文本为红色;
/*样式如下:*/
ul + p {
   color: red;
}
<!-- 结构如下: -->
<ul></ul>
<p></p>
<p></p>

4、兄弟选择器(X~Y)

  • 兄弟选择符和毗邻选择器一样,只是它没有约束。
  • 与毗邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中跟在ul后面的任何p元素。
/*样式如下:*/
ul ~ p {
   color: red;
}
<!-- 结构如下: -->
<ul></ul>
<p></p>
<p></p>

5、子代选择器(X > Y)

X Y(后代)和X > Y(子代)之间的不同点是后者只选择直接子代。例如,考虑如下的标记。

/*样式如下:*/
.container > ul {
    background-color: skyblue;
}
<!-- 结构如下: -->
<div class="container">
    <ul>
        <li> List Item
            <ul>
                <li> Child </li>
            </ul>
        </li>
        <li> List Item </li>
    </ul>
</div>

解析:

  • 选择器.container > ul将只选择类名为container的div的直接子代ul;
  • 不匹配更深层的li的子代的ul;
  • 因此,使用子代选择符有性能上的优势。

6、关于兼容

  • 后代、群组选择器兼容任何浏览器;
  • 毗邻、兄弟、子代选择器兼容 IE7+ Firefox Chrome Safari Opera等等。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值