Question

LESS相对较新，并尝试嵌套如何工作。我已经阅读了较少页面上的内容。

HTML

<!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>

LESS

.Test2 {
    display: block;
    #Test1 {
        .background1;
        width: 40px;
        height: 1000px !important;
    }
}

但如果我在没有嵌套的情况下编写它就可以了

.Test2 {
    display: block;
}

#Test1 {
    .background1;
    width: 40px;
    height: 1000px !important;
}

.background只是{background：red;}。这个概念在我的脑海里搞砸了吗？

Answer 1

嵌套问题和标记不匹配

嵌套通常表示特定元素将出现在另一个元素下面，因此您当前的代码有正确的想法。

目前，您的嵌套示例将尝试使用id＆＃34; Test1＆＃34;它嵌套在一个带有＆＃34; Test2＆＃34;类的元素下面，它与你的标记不同。

如果您想使用相同的标记来定位元素，请考虑将最外面的.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选择器似乎存在问题。你的意思是在你的＆＃34;测试2＆＃34;元素如下例所示？

.Test {
    display: block;
    #Test1 {
        .background{
          width: 40px;
          height: 1000px !important;
        }
    }
}

将编译如下：

如何在LESS中的类中定位id？

1 个答案: