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

Question

クラスにネストされていない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

追加された 28 10月 2011 〜で 09:28 著者 David Barker

ビュー: 5

源

ro ru fr es pt de hi bn ar

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

追加された 28 10月 2011 〜で 09:31 著者 Benjie

源

+1私にそれをビート

追加された 28 10月 2011 〜で 09:32, 著者 Curt, 源

私を助けてくれてありがとう、私は今どこが間違っていたかわかります。

追加された 28 10月 2011 〜で 09:38, 著者 David Barker, 源

どういたしまして：）

追加された 28 10月 2011 〜で 09:42, 著者 Benjie, 源

著者 James Allardice · Answer 1 · 2011-10-28T09:31Z

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

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

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

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

.widget p, .widget a, h2

著者 GolezTrol · Answer 2 · 2011-10-28T09:31Z

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

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

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

.widget p, .widget a, .widget h2 {...

著者 Mansoor Gee · Answer 3 · 2011-10-28T09:41Z

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