less嵌套.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>less嵌套练习</title>
<link rel="stylesheet" href="nest.css">
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
</body>
</html>
nest.less:
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1.less嵌套 子元素的样式直接写到父元素里面就好了
a {
color: red;
text-decoration: none;
// 2.如果有伪类、交集选择器、伪元素选择器,我们内层选择器的前面需要加&
&:hover {
color: blue;
}
}
}
less文件保存自动生成的nest.css文件:
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
text-decoration: none;
}
.header a:hover {
color: blue;
}