21

color プロパティを定義する特定性が等しい 2 つのクラスを考えると、要素の class 属性にリストされている最後のクラスが優先されると思いました。

http://htmlhelp.com/reference/css/structure.htmlから:

指定の順序簡単にするために、2 つのルールの重みが同じ場合は、最後に指定されたルールが優先されます。

次のバキューム コードの例では、クラス ルール セットが定義されている順序によって優先順位が決まります。ここでは、最後または最新のクラス ルール セット定義が優先されます。

<style>
    .makeBlue {color: blue;}
    .makeGreen {color:green;}
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

出力テキストは緑色です。

クラス宣言の順番を入れ替えて、最初に .makeGreen を宣言すると

<style>
    .makeGreen {color:green;}
    .makeBlue {color: blue;}        
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

出力テキストは青色です。

これは今まで気にしたことがありません。edit要素のclass属性にリストされている最後のクラスが優先されると思いました。

編集 明確にするために --> 要素をペット、たとえば犬と考えることがあります。要素の class 属性にクラスを追加すると、犬にコマンドが発行されます。座るように言って、後で横になるように言うと、犬は横になると思います。横になる方法を教えた後（最近では）に座る方法を教えたからといって、犬が座ったままでいるとは思いません。

それで... 2つの質問です。

  1. これが本来あるべき姿ですか？答えた
  2. もしそうなら...なぜですか？どちらが他の宣言より前に宣言されたかを判断するために、クラス宣言を掘り下げる必要があるという利点がわかりません。

どうもありがとう！

4

2 に答える 2

22

要素で指定するクラスの順序は関係ありません。重要なのは、スタイル宣言でそれらを定義する順序です。投稿した引用は、クラスが要素にリストされている順序ではなく、スタイル宣言を意味します。

于 2013-07-18T15:32:29.740 に答える
0

これはオプションを制限するようです。2 つの異なる段落で 2 つのクラスを使用したいが、優先順位が異なる場合は、最初に定義したクラスと同じで名前がわずかに異なる 3 番目のクラスを定義する必要があります。

例えば

.xxxxx {margin-top: 1em; margin-left: 0; text-align: left; ... [some other attribute definitions]}<br/>

.yyyyy {margin-top: 3em; margin-left: 1em; text-align: justify; ... [some different attribute definitions]}

<p class="yyyyy xxxxx">...</p>

常に 3em の上余白、1em の左余白、justify のテキスト配置、および xxxxx と yyyyy の他の属性を使用します。ただし、xxxxx と yyyyy の他のすべての属性を保持しながら、margin-top、margin-left、および text-align の設定をオーバーライドしたい状況が発生する可能性があります。優先順位がクラス属性の順序によって決定された場合、次のようにしてそのオプションを使用できます。

<p class="xxxxx yyyyy">...</p>

そうではないので、問題の 2 つの下に別の定義を作成する必要があります。

.zzzzz {margin-top: 1em; margin-left 0; text-align: left; ... [some other attribute definitions]}

そして使う

<p class="yyyyy zzzzz">...</p>

これは問題に対する最適な解決策ではないように思えますが、クラス属性の順序の優先順位により、CSS を台無しにすることなく柔軟性が向上します。

ところで、Nook Glowlight は、class 属性の順序で優先順位を設定できるようにすることで、本来あるべき方法でそれを行います。したがって、私のCSSはもう少しコンパクトです。

何十年にもわたるプログラミングで学んだことがあるとすれば、それは、すべての作業が行われる場所のできるだけ近くに優先順位を配置するのが最善だということです。リンクされた静的スタイルシートに優先順位を付けると、柔軟性が低下します。

于 2014-09-26T04:22:41.267 に答える