Question

我在页面功能中有以下HTML：

<div id="feature-detail">
    <div class="da1 d-active">
        <h1><span>Detail 1</span></h1>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
        <a href="#"><span>Show how</span></a>       
    </div>
</div>

然后我进一步了解页面：

<div id="page-submain" class="centred">
    <div id="left-widget" class="widget">
        <h1><span>Title</span></h1>
        <p><span>Lorem ipsum dolor sit amet.</span></p>
        <a href="#"><span>Read More</span></a>
    </div>
</div>

注意：上述两个父<div>元素都没有嵌套在一起。两者的父级都为<body>。

当我对CSS结构进行一些测试时，我注意到了这种样式规则：

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

影响<a>中的#feature-detail。当我明确地将样式应用于类'小部件'时，为什么这样做呢？

目前对我来说并没有太大的意义，但似乎IE，FF，Chrome和Opera正在解释它完全一样。我在这里错过了什么吗？

谢谢你看看！

Answer 1

你所写的内容相当于：

.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;
}

Answer 2

此处使用的选择器：

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

匹配“具有类窗口小部件的元素后代的p元素”，所有a元素和所有h2元素。

如果您希望a规则仅适用于作为类a的元素后代的widget元素，则需要指定（并且您有）如果您希望以类似的方式行事，请对h2执行相同的操作）：

.widget p, .widget a, h2

Answer 3

是的，逗号分隔符表示您实际上有多个选择器。所以选择器.widget p,a,h2匹配：

.widget
所有A，无论
所有H2，无论如何。

将其更改为：

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

Answer 4

标签并没有嵌套在.widget类中。我在jsfiddle上重新格式化了css。看看吧。

影响元素的CSS类没有嵌套在类中

4 个答案: