Question

我正在尝试使用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>

Answer 1

使用<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类中的元素。如果您仍然希望摆脱该类，那么您可以在不声明任何元素的情况下使用它，但是您必须调整样式表。您需要在CSS规则中的其他嵌套类之前删除所有.fuelux类。

他们只是使用它，以免与其他类冲突。

根据您的评论，我在这里举行演示，假设您正在使用fuelux，而在fuelux中有一个名为.button的类，并且他们在该类中使用红色。现在，假设容器div是您的html元素，它将使用此规则选择内部嵌套元素。

.fuelux .button {
    color: red;
}

Demo

现在假设您已从html标记中删除了该类，请查看会发生什么......

Demo 2

它不会应用样式。为什么？因为.fuelux下的嵌套元素没有.button类。是的，你确实有.button但它没有任何类.fuelux的父元素，所以它失败了。

最后但并非最不重要的冲突演示。假设您已经有一个名为.button的类，并且说甚至fuelux样式表都有一个名为.button的类，并且说您没有使用class="fuelux"，那么它只会忽略fuelux规则，它会使用你的。

Conflict Demo

Answer 2

如果你说你希望将课程fuelux存储在某个地方，那么你就不需要它一次又一次地写它然后它就不可能了。

一种方法可能是创建一个简单的脚本，然后编写一个程序，将class=fuelx添加到每个页面的头部。通过将标头放在一个单独的文件中然后包含它然后在该页面上运行脚本，可以更轻松地完成它。更简单的是，现在如果您的标题位于单独的文件中，则您不需要脚本，因为标题将包含在每个文件中，然后只需编写class=fuelx一次。

或者你可以从它的样式表中删除.fuelux类，而不是样式表不会查找任何.fuelux类，并且样式将应用于所有第一个元素.fuelux。

的子元素

避免为html设置全局类

2 个答案: