0

Fuel UXを使用しようとしています。その例を自分の Web ページにコピーしたところ、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">ですか？スタイルシートの設計方法です。スタイルシートからスニペットをピックアップしました。ここで何かをマークすると...

.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クラス内にネストされている要素を選択するだけです。それでもそのクラスを削除したい場合は、要素を宣言せずに使用できますが、スタイルシートを微調整する必要があります。.fueluxCSS ルールで他のネストされたクラスの前にすべてのクラスを削除する必要があります。

彼らはそれを使用しているだけなので、他のクラスと競合しません。

あなたのコメントによると、ここでデモンストレーションを投げています。あなたが を使用していて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ので、何度も何度も書き込む必要がないというのであれば、それは不可能です。

1 つの方法として、単純なスクリプトを作成してからclass=fuelx、すべてのページの先頭に追加するプログラムを作成することが考えられます。ヘッダーを別のファイルに入れ、それを含めて、そのページでスクリプトを実行することで、より簡単に実行できます。より簡単に、ヘッダーが別のファイルにある場合、スクリプトは必要ありません。ヘッダーはすべてのファイルに含まれ、class=fuelx一度だけ書き込むだけだからです。

または、そのスタイルシートからクラスを削除するだけ.fueluxで、スタイルシートが.fueluxクラスを検索せず、最初に.fuelux.

于 2013-07-28T13:06:55.260 に答える