Question

请告诉我为什么这个LESS CSS无效？ H2没有改变颜色？

由于

StyleSheet 2.less

@color: blue;

#header {
  color: @color;
}
h2 {
  color: @color;
}

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
    <link href="_/css/StyleSheet1.css" rel="stylesheet" />
    <script src="_/script/JavaScript1.js" type="text/javascript"></script>
    <link rel="stylesheet/less" type="text/css" href="_/css/StyleSheet2.less"> 
    <script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>





<!-- css3-mediaqueries.js for IE less than 9 -->
 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


</head>
<body>
    <div>


        <div id="bodyDiv">
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            a<br />
            <h2>test</h2>a<br />
            a<br />

        </div>
    </div>
</body>
</html>

Answer 1

你的较少文件在语法上是正确的，你有较少样式表和脚本的正确顺序，并且你的控制台没有显示任何错误，所以除非你因某些原因禁用了javascript，否则错误必须在_/css/StyleSheet1.css您可能为h2元素定义了一个颜色higher precendence，而不是您在较少样式表中指定的规则。删除该规则或在较少样式表中使用更高优先级的规则（例如#bodyDiv h2{}）来解决该问题。

为什么我的LESSCSS无法正常工作

1 个答案: