CSSプロパティがオーバーライド/無視されるのはなぜですか？

CSSの「階層」に問題があります（階層と呼ぶのが適切かどうかはわかりません）。私はHTMLの下のビットをスタイルすることを試みています。CSSプロパティがオーバーライド/無視されるのはなぜですか？

<body> 
    <section id="content"> 
    <article> 
     <ul class="posts-list"> 
     <li class="post-item"> 
      <h2>[post title]</h2> 
      <p class="item-description">...</p> 
      <p class="item-meta">...</p> 
     </li> 
     ... 
     </ul> 
    </article> 
    </section> 
</body>

は、私が持っているすべてのページのセクション＃内容の変更以来、私はそれらのすべてにわたって一貫したスタイルを維持したかったので、私はいくつかの「グローバル」CSSルールを書きました。

#content { 
    color: #000; 
    margin-left: 300px; 
    max-width: 620px; 
    padding: 0px 10px; 
    position: relative; 
} 

#content p, 
#content li { 
    color: #111; 
    font: 16px/24px serif; 
}

私は違ったul.posts-list以内スタイルのHTMLに望んでいたので、私はこれらのルールを書きました。

li.post-item > * { 
    margin: 0px; 
} 

.item-description { 
    color: #FFF; 
} 

.item-meta { 
    color: #666; 
}

しかし、いくつかの問題が発生しました。ここではChromeはCSSをレンダリングする方法である。

Screenshot of how Chrome is rendering my CSS

何らかの理由で、ルール#content p, #content liは.item-descriptionと.item-metaのための私のルールをオーバーライドしています。私の印象は、class/idの名前が特定のものであると考えられていることです。しかし、私はCSSがどのように動作するのか誤解しているようです。私はここで間違って何をしていますか？

編集：さらに、この階層の仕組みについてはどこで読むことができますか？

出典

2012-05-04 kibibyte

要素idは、CSSで最も優先度が高いため、CSSでは優先度があります。あなただけのIDを使用する必要があります。

#content li.post-item > * { 
    margin: 0px; 
} 

#content .item-description { 
    color: #FFF; 
} 

#content .item-meta { 
    color: #666; 
}

基本的にはidが（... P、李、UL、H1）クラスタグのプライオリティに優先順位を持っています。このルールを上書きするには、優先度を確認してください;

出典

2012-05-04 04:24:00 tibo

コードで+1しましたが、 [特定の公式仕様]（http://www.w3.org/TR/CSS21/cascade.html#specificity）と[フレンドリーチートシート]（http://www.stuffandnonsense.co.uk/archives/images/ specificitywars-05v2.jpg） – benesch

フレンドリーなチートシート、または「オタクのcssの仕様を説明する方法」！優れた！ – tibo

CSSルールが測定される「階層」は、特殊性と呼ばれます。 CSSルールの各部分は、実際の数値の基数10の値を持ちます。クラスはより多くの情報についてのみ10

ありながら、IDが100の価値があるIDのクラスをターゲットと比べて、より具体的でターゲットhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

出典

2012-05-04 04:24:39 jaredhoyt

を参照してください。より具体的なスタイリングは、あまり具体的なスタイリングを上書きします。 HTMLのインラインスタイルはより具体的であるため、IDターゲットスタイルを上書きすることに注意してください。 CSSで

<p style="color:white" id="itemDescId" class="item-description">...</p>

：：他の言葉で - それはhtmlコードに最も近いだからではないが、それは、特異階層の上位だから

p{color:blue;} 
#itemDescId{color:red;} 
.item-description{color:green}

テキストが白表示されます。インラインスタイルを削除した場合（通常はより管理しやすいコードを作成する必要があります）、テキストが赤くなります。 IDを削除すると緑色になります。クラスが削除されると、最後に青色になります。

これは、CSSに理解するために、より複雑なトピックの一つであり、私が唯一の表面を傷つけていますが、私はCSSの特異性がどのように機能するかに見つけた最も簡単な説明はCSSのトリックで終わった：

http://css-tricks.com/specifics-on-css-specificity/

出典

2014-07-27 21:35:31 Pupchuck

私の応答は、答えに「コメント」されている必要がありますが、#tiboが正しく答えたが、私は正しい修正を持っている：

li.post-item > * { 
    margin: 0px !important; 
} 

.item-description { 
    color: #FFF !important; 
} 

.item-meta { 
    color: #666 !important; 
}

!importantルールは、ID aと評価の順序を上書きしますクラス。ここで

はあなたが理解するのに役立ちます記事へのリンク、When Using !important is The Right Choiceは、それはCSSの基準に従うことが容易:)

出典

2015-10-28 04:35:41

...安い編集.... js ... –

より良い私の人生を作った...です。 CSSのセレクタを選択し、その親の下でmakeitを実行すると、css fles（.cssファイルなど）を読み込むときに競合が発生しないことがあります。

出典

2016-03-21 18:58:16

あなたは何を意味するのか解説したり、コードサンプルを与えることができますか？私はあなたが言っていることに全く従わない。 – Kmeixner

CSSプロパティがオーバーライド/無視されるのはなぜですか？

答えて

関連する問題