06.less中的层级结构和&

发表于 | 分类于

less中的层级结构和&

&的用法

&有什么用？那就先说less的嵌套，也就是less的层级结构

  • less嵌套规则允许在一个选择器中嵌套另一个选择器
1
2
3
4
5
6
7
8
9
10
11
12
<header>
    <h1><a href="http://">网</a></h1>
    <p>学网！</p>
</header>

head{
	h1{
		a{
            
        }
	}
}
  • 如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
  • 没有&，那么写的都是后代选择器，如果想表达元素的一种状态怎么办？就是需要:hover，这些伪类怎么办书写？这时候就需要&了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header>
    <h1><a href="http:/">网</a></h1>
    <p></p>
</header>

head{
	h1{
		a{
          :hover{
          	  background:#777;
          }  
        }
	}
}

输出的css是这样的：head h1 a:hover

  • &（Ampersand）是英语单字“and”之代表符号（在之前是英文字母表的第二十七个字母），亦可用作中文中的“和”、“与”之代表符号。

  • &符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。