0

私はtwitterブートストラップ（TB）を使用していますが、CSSルールが優先されるべきではないときに優先されているようです。私は問題を示すためにこのフィドルを作成しました：

http://jsfiddle.net/whoiskb/Za2TB/

HTML

<div class="teaser">
     <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>

CSS（およびtwitterブートストラップへの外部リンク）

div.teaser h1.teaserText {
     font-size: 100px;
     font-weight: 100;
     color: black;
     line-height: 90px;
     font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
     text-transform: uppercase;
}

div.teaser h1.teaserText label {
     color: #FCCE00;
}​

特異性ルールについて私が理解していることから、HTMLセレクターは1の値を取得するため、TBのラベルに定義されたルールは1の値のみを取得する必要があります。3つのhtmlセレクターと2つのクラスセレクターがあるため、クラスの値は23になります。それぞれ10の値を取得する必要があります。TB css定義のラベルセレクターが優先されていますが、フィドルでわかるように。

誰かが私がここで欠けているものを説明できますか？

ところで、私はこれを解決するために！importantタグを使用できることを知っています。私は、CSSの特異性ルールをよりよく理解しようとしているだけです。

4

2 に答える 2

2

特異性ルールは、異なるルールが**同じ要素を対象とする場合にのみ適用され (ラベルの色と同様)、異なる要素が対象となる場合は適用されません (その要素のいくつかのスタイルが継承される場合でも)。

ラベルに適用される stylerule が 1 つあり、それが正しく適用される色です。他のすべてのスタイルは別の要素に適用されるため、もちろん、ラベルを直接対象とする TB スタイルが優先されます。

一部のスタイルは継承されますが (例の font-size や line-height など)、要素を直接対象とするルールがあるとすぐにオーバーライドされます。TB は、次のルールで font-size と line-height をオーバーライドします。

label, input, button, select, textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

次のように宣言することで、これを簡単に修正できます。

div.teaser h1.teaserText label {
     color: #FCCE00;
     font-size:inherit;
     line-height:inherit;
     /* and so on */
}​
于 2012-12-13T16:34:18.470 に答える
0

私はあなたが問題が何であると思うかについて正確にはわかりませんが、推測します：

CSSの特異性は、特定の要素の1つのCSSプロパティに2つ以上のルールがある場合に何が起こるかを決定します。

したがって、このHTMLを考えると：

<label class="myLabel">Hello!</label>

そしてこのCSS：

label {
    color: red;
    font-size: 24px;
}

.myLabel {
    color: blue;
}

.myLabelはより具体的なセレクターであるため、ラベルは青色になりlabelます。

.myLabelただし、ブロックにはプロパティを設定するルールが含まれていないため、ラベルのフォントサイズも24ピクセルになりfont-sizeます。

于 2012-12-13T16:32:10.173 に答える