8

部分的なテンプレートを含むグローバル テンプレートを使用した Web サイトを持っていますが、単純な CSS の問題で立ち往生しています。

HTML

<div id="context"> <!-- this is part of global template -->
    <!-- this is rendered by partial template -->
    <select id="test">
        <option>[Select a value]</option>
    </select>
</div>

グローバル CSS

<select>グローバル スタイルシートでは、内部のすべての要素のデフォルトの幅#contextが定義されています。

div#context select
{
   width: 500px;
}

部分的なCSS

部分テンプレート ( 内のコンテンツをレンダリングする#context) の場合、デフォルトの幅 をオーバーライドする必要があります<select>。これは次のように簡単だと思いました：

select#test
{
    width: 150px;
}

しかし、私は間違っていました、それはうまくいきません。そして、それは、css が要素により適していると考えているためだと思います。これはdiv#context select、部分的なテンプレート css を次のように変更すると機能するためです。

div#context select#test
{
    width: 150px;
}

もちろん、これは私がやりたいことではありません。なぜなら、部分テンプレートは、グローバル テンプレート内のどのノードでレンダリングされるかを認識してはならないからです。

グローバル テンプレートの要素を指定せずに部分テンプレートのスタイルをオーバーライドする方法についてのアイデアはありますか?

jsFiddleを参照してください

4

5 に答える 5

3

「より良い一致」についてではなく、ルールの特異性の値が高くなります。このリンクを確認してください

!important の使用を避けることをお勧めします。ここでそれについて読むことができます。ここで、!important を使用しない理由をいくつか強調します。

1.ずさんな、よく考えられていないコードを助長する

2.保守性の低いコードを作成する

3. ユーザー スタイル シートで宣言されたスタイルをオーバーライドするため、アクセシビリティが低下します。

于 2013-08-25T11:15:22.283 に答える