html - 避免为html设置全局类

我正在尝试使用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">有什么问题？这就是样式表的设计方式。我已经摘录了一个片段。如果您在这里标记某物...

.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;
}

from their stylesheet

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

Demo

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

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

Demo 2