我试图用燃料UX 。 我复制它的例子,我自己的网页,发现CSS无法加载。 我的HTML与样本HTML比较之后,我发现样本HTML设置全局类:
<html lang="en" class="fuelux">
添加此行我的HTML的头解决了燃油UX的问题。 但是添加这种全局设置混合我的网页上许多其他元素。 如何设置这个class="fuelux"
本地 ?
编辑:据我所知class="fuelux"
打开一个命名空间,现在下的所有名称.fuelux
是全局命名空间下。 有没有办法来避免打开此fuelux
命名空间?
非常感谢!
这里是燃油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">
? 这是样式表是如何设计的。 我拿起一个片段从他们的样式 。 如果您标记的东西在这里...
.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
类。 如果你仍然想摆脱那类的,比你可以使用它没有任何声明元素上,但你必须调整你的样式表。 您需要删除所有.fuelux
在你的CSS规则的其他嵌套类之前的类。
他们只是用它,这样它不会与其他类发生冲突。
根据你的评论,我扔在这里的演示,假设您正在使用fuelux
,并在fuelux
有一个类调用.button
和他们使用的红色该类。 所以,现在,假设容器div
是你的html
元素,它会选择使用此规则内嵌套的元素。
.fuelux .button {
color: red;
}
演示
现在让我们假设你从删除的类html
标记,以便看看会发生什么......
演示2
它不会应用样式。 为什么? 因为有在任何嵌套元素.fuelux
有一类.button
。 是的,你确实有.button
,但它不具有任何类父元素.fuelux
所以失败。
最后但并非最不重要的,冲突的演示。 假设您有称为类.button
不已,并说即使fuelux
样式表有类调用.button
,说你没用过class="fuelux"
,比它会简单地忽略fuelux
规则,它会使用你的。
冲突演示
如果你说你想要的类fuelux
保存在某个地方等,那么你就不会需要它再写一遍,再然后是不可能的。
一种方法可以创建一个简单的脚本,然后写一个程序,添加class=fuelx
在每个页面的头部。 它可以通过投入seprate文件的标题,然后包括它更容易完成,然后在该网页上运行的脚本。 更简单的,现在如果你的头是在seprate文件,你并不需要一个脚本怎么一回事,因为头会在每个文件中inluded然后只写class=fuelx
只有一次。
或者,你可以删除.fuelux
类从它的样式表比这样样式表不会找任何.fuelux
类和样式将被应用到所有的都是第一的子元素的元素.fuelux
。