Question

以下是该页面的HTML内容：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
</head>

如果我在谷歌浏览器中打开源代码并在新选项卡中打开以查看较少的javascript文件，并且我写的样式表越少，我就可以看到内容，这意味着它们已正确链接。

为什么我的LESS样式没有被应用？

编辑：甚至从WAMP运行此操作以避免整个＆＃34; file：///＆＃34;问题，不适用这些风格。

编辑：

.less文件的内容：

html, body {
    margin:0;
    padding:0;
}

#headbg {
    height:497px;
    background-color:red;
}

#header-wrapper {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

#header-wrapper #left-container {
    float:left;
    position:relative;
    outline:1px solid cyan;    
}

#logo {
    margin-left:10px;
    display:block;
}

#logo-hue {
    position:absolute;
    top:20px;
}

#social {
    float:left;
    color:#fff;
}

#social .message {
    text-align:center;
}

#social .contact {
    text-align:center;
}

#header-wrapper #carusel-container {
    float:left;
    outline:1px solid cyan;
}

#bodybg {
    background-color:#fff;
}

Answer 1

将样式表引用放在任何其他引用之上。

<head>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
</head>

Answer 2

Ryan的答案是正确的：然而Js和Css理论说Js将很快开始工作，因为加载取决于调用哪个函数。但是当js脚本运行时 - 尚未加载css。因此alwasy首先加载css以便js（如果它们直接工作，例如document.ready（）） - 它们具有所需的所有属性，样式。

出于同样的原因，在尝试任何插件之前，你应首先包含jquery文件（如果你使用它）。

希望有所帮助

客户端LESS没有使用我写的样式

2 个答案: