Sass--伪类嵌套

Sass伪类嵌套详解
本文详细介绍了如何在Sass中使用伪类嵌套,包括具体的语法示例及编译后的CSS效果。同时,文章还探讨了选择器嵌套可能导致的问题,并给出了相应的建议。

其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。

a {
    &:link,
    &:visited {
        color: blue;
    }
    &:hover {
        color: orange;
    }
    &:active {
        color: red
    }
}

编译出来的 CSS:

a:link, a:visited {
  color: blue;
}
a:hover {
  color: orange;
}
a:active {
  color: red;
}

避免选择器嵌套:

  • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
  • 选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。

为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。

转载于:https://www.cnblogs.com/qjuly/p/9067635.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值