<div class="da1 d-active"> Detail 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Show how "> <div class="da1 d-active"> Detail 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Show how "> <div class="da1 d-active"> Detail 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Show how " />

クラスにネストされていないCSSクラスに影響を与える要素

私はページ機能で次のHTMLを持っています:

<div id="feature-detail">
    <div class="da1 d-active">
        

Detail 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show how </div> </div>

私はさらにページをさらに下に持っています:

<div id="page-submain" class="centred">
    <div id="left-widget" class="widget">
        

Title

Lorem ipsum dolor sit amet.

Read More </div> </div>

NOTE: Neither of the above parent <div> elements are nested within each other. Both have a parent of <body>.

When I run some tests on the CSS structure, I have noticed that this style rule:

.widget p,a,h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

Is influencing the in #feature-detail. Why is this doing that when I've explicitly applied the style to the class 'widget'?

Not making a huge amount of sense to me at the moment, but it seems that IE, FF, Chrome and Opera are interpretting it exactly the same. Am I missing something here?

Thanks for taking a look!

0

4 答え

あなたが書いたことは次のものと同じです:

.widget p {
    margin:3px 5px 3px 5px;
    padding:0;
}
a {
    margin:3px 5px 3px 5px;
    padding:0;
}
h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

あなたが望むものは次のとおりです:

.widget p, .widget a, .widget h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}
3
追加された
+1私にそれをビート
追加された 著者 Curt,
私を助けてくれてありがとう、私は今どこが間違っていたかわかります。
追加された 著者 David Barker,
どういたしまして :)
追加された 著者 Benjie,

これで使用されるセレクタ:

.widget p,a,h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

"要素の子孫であるp要素とクラスウィジェット"、すべての a 要素、すべての h2 要素と一致します。

クラス widget を持つ要素の子孫である a 要素にのみ a ルールを適用する場合は、 (同じように動作させたい場合は、 h2 で同じことをする必要があります)。

.widget p, .widget a, h2
1
追加された
ありがとうジェームズ、私はこれを認識しています。問題は、#feature-links a 要素が widget クラスの子孫ではないということです。
追加された 著者 David Barker,
謝罪ジェームズ、私はあなたが今下の答えを見て書いたことを理解しています。ありがとう!
追加された 著者 David Barker,

はい、カンマ区切り文字は、実際に複数のセレクタがあることを意味します。したがって、セレクタ .widget p、a、h2 は次のものと一致します。

  • All P's in .widget
  • All A's, regardless
  • All H2's, regardless.

それを次のように変更します。

.widget p, .widget a, .widget h2 {...
1
追加された
ありがとう、私は今何をしていたのか分かります。私のルールにもっと具体的でなければならない。
追加された 著者 David Barker,

タグとは、.widgetクラス内でネストされていません。私は jsfiddle でCSSを再フォーマットしました。それを見てみましょう。

0
追加された