我正在尝试使用 Fuel UX .我把它的例子复制到自己的网页上，发现css加载不出来。将我的 HTML 与示例 HTML 进行比较后，我发现示例 HTML 设置了一个全局类:
<html lang="en" class="fuelux">
将此行添加到我的 HTML 的头部解决了 Fuel UX 的问题。但是，添加此全局设置会在我的页面上混合许多其他元素。如何设置此 class="fuelux" 本地？
编辑: 据我了解，class="fuelux" 打开一个命名空间，现在 .fuelux 下的所有名称都在全局命名空间下.有没有办法避免打开这个 fuelux 命名空间？
非常感谢!
这是 Fuel UX 中树容器的 html:
<div class="well tree-example">
<div id="MyTree" class="tree">
<div class="tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="icon-folder-close"></i>
<div class="tree-folder-name"></div>
</div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none">
</div>
</div>
<div class="tree-item tree-folder-content" style="display:none;">
<i class="tree-dot"></i>
<div class="tree-item-name"></div>
</div>
</div>
</div>
最佳答案
使用<html class="fuelux">有什么问题？ ？这就是样式表的设计方式。我捡到一个片段 from their stylesheet .如果你在这里做标记......
.fuelux .clearfix {
*zoom: 1;
}
.fuelux .clearfix:before,
.fuelux .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.fuelux .clearfix:after {
clear: both;
}
.fuelux .hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.fuelux .input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fuelux article,
.fuelux aside,
.fuelux details,
.fuelux figcaption,
.fuelux figure,
.fuelux footer,
.fuelux header,
.fuelux hgroup,
.fuelux nav,
.fuelux section {
display: block;
}
.fuelux audio,
.fuelux canvas,
.fuelux video {
display: inline-block;
*display: inline;
*zoom: 1;
}
.fuelux audio:not([controls]) {
display: none;
}
它选择嵌套在具有 fuelux 类的元素下的元素所以你需要在 <html> 上声明标记以使其正常工作。
此外，html标签不被视为页面的头部。在 html 上声明一个类是完全正常和可接受的标签。它只选择嵌套在 fuelux 中的元素。类(class)。如果你仍然想摆脱那个类，那么你可以在不声明任何元素的情况下使用它，但你将不得不调整你的样式表。您需要删除所有 .fuelux CSS 规则中其他嵌套类之前的类。
他们只是在使用它，以免它与您的其他类发生冲突。
根据您的评论，我在这里进行演示，假设您使用的是 fuelux ，并在 fuelux有一个类叫做 .button他们在该类(class)中使用红色。所以现在，假设容器 div是你的 html元素，它将使用此规则选择内部嵌套元素。
.fuelux .button {
color: red;
}
现在假设您从 html 中删除了类标记，看看会发生什么......
它不会应用样式。为什么？因为.fuelux下没有嵌套元素有一类 .button .是的，你有 .button但它没有任何类为 .fuelux 的父元素所以它失败了。
最后但并非最不重要的，冲突演示。假设您有一个名为 .button 的类已经，甚至说fuelux样式表有一个名为 .button 的类并说你没有使用 class="fuelux" , 而不是它会简单地忽略 fuelux规则，它会使用你的规则。
关于html - 避免为 html 设置全局类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17908447/