5

HTMLウィジェット用のCSSセレクターを作成するための最良の戦略は何ですか. これらのセレクターは、子要素や一般的なセレクターと競合してはなりません。

/* this item class it is already done, has no relation with my widgets´ items
  and i can´t modify it*/        
   .item { color:red; }    

   .my-first-widget{...}
   .my-first-widget .item { color: blue; font-size:16px;}

   .my-second-widget{...} 
   .my-second-widget .item { font-size:14px;}

上記のコードの問題:

  1. my-second-widget を my-first-widget 内に (ただし my-first-widget .item 内ではなく) 挿入すると、my-second-widget のアイテムは青色になります (色を継承させたいのです´)の親）。
  2. my-second-widget を .item として定義されたルールでプロジェクト内に挿入すると、 my-second-widget のアイテムは赤になります (関係のない一般的なアイテムからではなく、親から色を継承するようにします)クラス）。

エクスポート可能なウィジェットのスタイリングに最適なソリューションはどれですか?

解決策 1 (親クラスのプレフィックスを使用)

   .my-first-widget{...}
   .my-first-widget-item { color: blue; font-size:16px;}

   .my-second-widget{} 
   .my-second-widget-item { font-size:14px;}

解決策 2 (子セレクターを使用)

   .my-first-widget{...}
   .my-first-widget > .item { color: blue; font-size:16px;}

   .my-second-widget{ color: black;} 
   .my-second-widget > .item { font-size:14px;}

solution2 では、一般的な .item セレクターとまだ競合しています...

他のアイデアはありますか？

4

1 に答える 1

2

以下の内容でよろしいかと思います。

これが HTML の場合:

<div class="project">
    <div class="item">item outside widget</div>
    <div class="my-second-widget"><span class="item">item</span></div>
</div>

このCSSを試してください：

.item {
    color:red;
}
.my-first-widget {
}
.my-first-widget .item {
    color: blue;
    font-size:16px;
}
.my-second-widget {
}
.my-second-widget .item {
    color: inherit;
    font-size:14px;
}

.project {
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/3eLpU/

color: inheritonに設定します.my-second-widget .item。これにより、ネストされたオブジェクトは、 (設定されている場合) カラー値、または(設定されている場合) または最終的にボディ (設定値またはデフォルト値).itemのカラー値を継承します。.my-second-widget.project

最上位.itemルールが存在する場合、それは の外部で適用され.my-second-widgetます。

于 2013-10-02T11:20:23.390 に答える