/* 由于less的底层就是用JavaScript实现的, 所以JavaScript中常用的一些函数在less中都支持 */ 不想介绍，因为太他妈多了。。。。 你们自己看把.
"en">"UTF-8">11-less中的内置函数"stylesheet" href="css/11-less中的内置函数.css">
//层级结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*在哪里加&,代表了它以及上级都不是后代，其他的是哈,举例:*/ /*后代有空格才是后代哈*/ /*.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: yellowgreen;
width: 100px;
height: 100px;
}
}*/ //编译后的 /*.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;
}
.father::before {
content: "子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}*/ /*.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: yellowgreen;
width: 100px;
height: 100px;
}
}*/ //编译后的后代选择器 /* .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;
}
.father ::before {
content: "子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
*/ </style> </head> <body> <div></div> </body> </html>
继承：
"en">"UTF-8">Document"father">"son">
