0

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

2 回答 2

4

使用有什么问题<html class="fuelux">？这就是样式表的设计方式。我从他们的 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类中的元素。如果您仍然想摆脱该类，则可以在不声明任何元素的情况下使用它，但是您必须调整样式表。您需要.fuelux在 CSS 规则中删除其他嵌套类之前的所有类。

他们只是在使用它，以便它不会与您的其他课程发生冲突。

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

.fuelux .button {
    color: red;
}

演示

现在让我们假设您从html标签中删除了类，看看会发生什么......

演示 2

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

最后但并非最不重要的，冲突演示。假设您已经调用了一个类.button，并且说即使fuelux样式表也调用了一个类.button并说您没有使用class="fuelux"，那么它将简单地忽略该fuelux规则并使用您的规则。

冲突演示

于 2013-07-28T13:06:02.227 回答
0

如果您说您希望将类fuelux存储在某个地方，那么您将不需要它一次又一次地编写它，那么这是不可能的。

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

或者您可以.fuelux从它的样式表中删除类，而不是这样样式表不会查找任何.fuelux类，并且样式将应用于所有最初是.fuelux.

于 2013-07-28T13:06:55.260 回答