9_less中的层级结构
- 如果在某一选择器的 {} 中直接写上了其他的选择器,会自动转换成后代选择器,如:
.father{
.son{
}
}
此时编译为css就是(好像这个有点废话了):
.father .son{
}
- & 的作用是,告诉less在转换时,不要用后代来转换,直接拼接在当前选择器的后面即可
例如:
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.son {
&:hover {
background: skyblue;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
编译的css:
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.father .son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.father .son:hover {
background: skyblue;
}
此时符合我们的预期效果:鼠标hover到son上面变颜色,hover在father上不会改变
那么来看下less代码son中的hover如果前面不加 & 有啥效果
less
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.son {
// 如果此时的 hover 前面不加 & ,那么转换成css时,会将hover样式添加给 father 和 son,
// 但是在浏览器中 hover 并不起作用
:hover {
background: skyblue;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
编译的css:
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); .father .son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.father .son :hover {
background: skyblue;
}
此时发现,你hover哪个都不变,不符合预期效果
&还是很好用的,其他用法可以查看 这位老哥 的博客
使用 & 提哦按家子元素:
html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style> * {
margin: 0; padding: 0; } </style>
<link rel="stylesheet" href="css/12_2.css">
</head>
<body>
<div class="father">
<!-- <div class="son"></div>-->
</div>
</body>
</html>
less:
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* .son {
&:hover {
background: skyblue;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}*/
&::before {
content: "子元素";
display: block;
background: #b32323;
width: 100px;
height: 100px;
}
}
投递蚂蚁集团等公司10个岗位
查看4道真题和解析