Less 学习笔记(六)

6. Less 中的嵌套

在Less中，嵌套规则使这个问题迎刃而解。嵌套规则允许在一个选择器中嵌套另一个选择器，这更容易设计出精简的代码，并且样式之间的关系一目了然。

• Html 代码

  <ul class="list">
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  	<li><a href="">朝鲜外相与越南总理会晤1小时 重点谈“革新开放”</a><span>2018-12-03</span></li>
  </ul>
  

• Less 代码

  // Less 中的嵌套
  .list{
  	width: 800px;
  	margin: 20px auto;
  	padding: 0;
  	list-style: none;
  
  	li{
  		height: 30px;
  		line-height: 30px;
  		background: pink;
  		margin-bottom: 5px;
  		padding: 0 5px;
   	}
  
  	a{
  		float: left;
  		// & 代表它的上一层选择器
  		&:hover{
  			color:red;
  		}
  	}
  
  	span{
  		float: right;
  	}
  }
  

• 最终效果
  

在使用嵌套规则时，需要特别注意 & 符号。内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

上一节