Less 嵌套

最新推荐文章于 2023-04-28 10:25:01 发布

VIP文章书和咖啡

最新推荐文章于 2023-04-28 10:25:01 发布

阅读量659

点赞数 1

分类专栏： Less 文章标签： css html

本文链接：https://blog.csdn.net/ivenqin/article/details/107353181

版权

本节我们学习 Less 中的嵌套，嵌套应该很容易理解，HTML 语言中就支持标签的嵌套。我们在使用 CSS 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如：

.xkd{
   
  font-size: 14px;
}
.xkd p{
   
  line-height: 25px;
}
.xkd p span{
   
  color: #ccc;
}

这样写虽然也好理解，但是没有那么直观，维护起来也不方便。

而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在一个选择器中嵌套另一个选择器，这样可以使得代码看起来一目了然，后期维护也方便。

例如上面的 CSS 代码使用 Less 语言来写：

.xkd{
   font-size: 14px;
   p{
      line-height: 25px;
      span{
         color: #ccc;
      }
   }
}

这样整体看起来是不是更直观一些，一层套一层。但是注意哟，一般我们不会嵌套太多层，嵌套的层数越多&

关注