避免爲html設置全局類

我正在嘗試使用Fuel UX。我將它的示例複製到我自己的網頁上，發現無法加載css。我的HTML與樣本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>

來源

2013-07-28 John Sket

*如何在本地設置此類=「fuelux」？*表示什麼？ –

正如我所說，如果我刪除'class =「fuelux」'，我的css無法加載。所以我需要將它設置在某個地方，但不是在我的頁面的頭部。 –

你的額外的CSS文件應該沒有'HTML'包含類或不。我相信Fuel UX CSS文件正在覆蓋其他CSS文件的CSS屬性。正如你所說，只要從'html'標籤中移除'fuelux'類，Fuel UX就不會應用任何樣式。只要確保按照正確的順序適當地使用樣式表。 – dbf

是什麼在使用<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

來源

2013-07-28 13:06:02

假設我有另一個具有'.abc'的css文件。顯然，如果我在全局命名空間中引入'fuelux'，那麼這兩個命名空間就有可能相互衝突。（對不起，我是web dev的新手，術語來自C++/Java。） –

@JohnSket等待我會告訴你一個演示 –

@JohnSket我用例子解釋 –

如果你說你想要的類fuelux保存在某個地方等，那麼你將不再需要它一次又一次地寫那麼它是不可能的。

一種方法可能是創建一個簡單的腳本，然後編寫一個程序，將class=fuelx添加到每個頁面的頭部。這可以通過將您的標頭放在一個單獨的文件中，然後將其包含在內，然後在該頁面上運行腳本來更輕鬆地完成。更簡單的是，現在如果你的頭文件在一個單獨的文件中，你不需要腳本，因爲頭文件將包含在每個文件中，然後只寫class=fuelx一次。

或者，你可以刪除.fuelux類從它的樣式表比這樣樣式表不會找任何.fuelux類和樣式將被應用到所有的人首先.fuelux的子元素的元素。

來源

2013-07-28 13:06:55

避免爲html設置全局類

回答

相關問題