相对较新的LESS并尝试嵌套如何工作.我已经阅读了较少页面上的内容.
<!DOCTYPE html>
<html>
<head class="Setup">
<link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/>
</head>
<div class="Test">
<span id="Test1" class="Test2"></span>
</div>
</html>
减
.Test2 {
display: block;
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
}
但如果我在没有嵌套的情况下写它就可以了
.Test2 {
display: block;
}
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
.background只是{background：red;}.这个概念在我的脑海里搞砸了吗？
解决方法
嵌套问题和不匹配的标记
嵌套通常表示特定元素将出现在另一个元素下面,因此您当前的代码具有正确的想法.
目前,您的嵌套示例将尝试将id为“Test1”的元素作为目标,该元素嵌套在具有类“Test2”的元素下方,该元素与您的标记不同.
如果您想使用相同的标记来定位元素,请考虑将最外面的.Test2选择器更改为.Test：
/* This will target an element with id "Test`" below an element with class "Test" */
.Test {
display: block;
#Test1 {
width: 40px;
height: 1000px !important;
}
}
您可以在下面看到如何将其转换为CSS：
背景检查语法
此外,您使用的.background选择器似乎存在问题.您的意思是在“Test2”元素下面定位一个额外的样式,如下例所示？
.Test {
display: block;
#Test1 {
.background{
width: 40px;
height: 1000px !important;
}
}
}
其编译如下：
