これはCSSでより具体的ですか？

以下は私のコードです。 "hi"と "hello"の両方が白の背景色になっているのはなぜですか？私は要素.content .partiは.content pより特定であり、 "hello"はオレンジ色の背景色でなければならないと思います。これはCSSでより具体的ですか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>particularity</title> 
    <style type="text/css"> 
     .content p { 
      background-color: white; 
     } 
     .content .parti { 
      background-color: orange; 
     } 
    </style> 
</head> 
<body> 
<div class="content"> 
    <p>hi</p> 
    <div class="parti"> 
     <p>hello</p> 
    </div> 
</div> 
</body> 
</html>

出典

2017-02-13 Sandy

CSSの優先順位があり、[この質問]（http://stackoverflow.com/questions/25105736/what-is-the-order-of-を参照してください先行 - for-css） – Irfan

.content .parti p{ 
     background-color: orange; 
    }

あなたのスタイルの重みがないp要素のdivのためのものです。したがって、background-color: orangeはpタグに追加されません。

出典

2017-02-13 03:53:06 Shubhranshu

https://css-tricks.com/specifics-on-css-specificity/この記事では、あなたの答えを詳しく説明しています。 – Clemsonopoly94

@ Clemsonopoly94はい。私はそこからCSSスタイルの重量コンセプトも理解しています – Shubhranshu

ありがとうございます。「背景色」は継承できないという誤解をしました。今度は、CSSファイルを '.content p {color：white; } .content .parti {color：orange; } '。 [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/）に続いて、 '.content .parti {color：orange; } 'は「hello」に特化していますが、まだ白です。 – Sandy

<div class="parti"> 
    <p>hello</p> 
</div>

p要素はそう何を参照してください白で、.parti div要素の上にあります。埋め込みを.partiに追加すると、その背景色が表示されます。

.content p { 
 
    background-color: white; 
 
} 
 
.content .parti { 
 
    background-color: orange; 
 
    padding: 10px; 
 
}

<div class="content"> 
 
    <div class="parti"> 
 
    <p>hello</p> 
 
    </div> 
 
</div>

出典

2017-02-13 03:52:26

ありがとうございました。「背景色」は継承できないという誤解をしました。私は '.content .parti'に' background-color'を追加し、 'p'はこのプロパティを継承できませんでした。 @ Shubhranshu @ Eugene – Sandy

ありがとうございました。「背景色」は継承できないという誤解をしました。スタイルを '.content p {color：white;}に変更します。 } .content .parti {color：orange; } '。 [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/）に従うと、 '.content .parti {color：orange; } 'は" hello "に特化していますが、まだ白です。 – Sandy

2番目のpは、.contentクラスのdivの子要素です。それがそのスタイルを継承する理由です。また、@ Shubhranshuで述べたように、pではなくdivにスタイルを適用しました。

出典

2017-02-13 04:07:41 Eugene

はインラインCSSで上書きされているCSS（スタイルタグ内）

CSSルールとcssファイルの優先順位があります。
より具体的でないセレクタが、より具体的なセレクタよりも優先されます。
コードの前に表示されるルールは、後で表示されるルール（同じ特殊性）によって上書きされます。

ポイント3のため、背景はまだ白です。

クレジット：スタックオーバーフローthis答え

出典

2017-02-13 04:17:04 Irfan

これはCSSでより具体的ですか？

答えて

関連する問題