less嵌套规则

最新推荐文章于 2024-07-05 23:21:15 发布

转载最新推荐文章于 2024-07-05 23:21:15 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzndkj/p/9315837.html

本文介绍如何使用LESS预处理器通过嵌套选择器来简化CSS编写，包括基本的元素和伪类如:hover的简洁书写方式，使得样式组织更加清晰且易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌套，是less里面最有意思的小东西，比如说我们经常性的去写一些列表性的东西

html

<ul class="list">
    <li><a href="#">links</a><span>2018-07-16</span></li>
    <li><a href="#">links</a><span>2018-07-16</span></li>
    <li><a href="#">links</a><span>2018-07-16</span></li>
</ul>

less

/*
一般这么写
.list{}
.list li{}
.list a{}
.list span{}
*/
.list{
　　width:600px;
　　margin: 30px auto;
　　padding:0;
　　list-style: none;

　　li{
　　　　height: 30px;
　　　　line-height: 30px;
　　　　background-color: pink;
　　　　margin-bottom:5px;
　　}
　　a{//不要写在li里面，尽量避免嵌套层级过深
　　　　float: left;
　　}
　　span{
　　　　float: right;
　　}
}
=>
/*
一般这么写
.list{}
.list li{}
.list a{}
.list span{}
*/
.list {
　　width: 600px;
　　margin: 30px auto;
　　padding: 0;
　　list-style: none;
}
.list li {
　　height: 30px;
　　line-height: 30px;
　　background-color: pink;
　　margin-bottom: 5px;
}
.list a {
　　float: left;
}
.list span {
　　float: right;
}

除了这个，它还提供一个更好玩的小东西，加hover的时候之前这样写

/**
.list a{}
.list a:hover{}
*/
.list{
　　width:600px;
　　margin: 30px auto;
　　padding:0;
　　list-style: none;
 
　　a{
　　　　float: left;
　　　　//& 代表上了一层的选择器
　　　　&:hover{
　　　　　　color:red;
　　　　}
　　}
}
=>
/**
.list a{}
.list a:hover{}
*/
.list {
　　width: 600px;
　　margin: 30px auto;
　　padding: 0;
　　list-style: none;
}
.list a {
　　float: left;
}
.list a:hover {
　　color: red;
}