-->

避免设置一个全球性的类HTML(Avoid setting a global class for h

2019-10-29 16:33发布

我试图用燃料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>

Answer 1:

什么是使用问题<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规则,它会使用你的。

冲突演示



Answer 2:

如果你说你想要的类fuelux保存在某个地方等,那么你就不会需要它再写一遍,再然后是不可能的。

一种方法可以创建一个简单的脚本,然后写一个程序,添加class=fuelx在每个页面的头部。 它可以通过投入seprate文件的标题,然后包括它更容易完成,然后在该网页上运行的脚本。 更简单的,现在如果你的头是在seprate文件,你并不需要一个脚本怎么一回事,因为头会在每个文件中inluded然后只写class=fuelx只有一次。

或者,你可以删除.fuelux类从它的样式表比这样样式表不会找任何.fuelux类和样式将被应用到所有的都是第一的子元素的元素.fuelux



文章来源: Avoid setting a global class for html
标签: html css fuelux