Question

初始CSS样式不能被特定分配给它的样式覆盖。我如何构建我的CSS或如何正确设置蓝色类型的嵌套元素？

HTML

<ul class="listing">
<li>
    <p> There is plenty of wood.</p>
</li>
<li>
    <div class="big">
        <p> This is extra big</p>
    </div>
</li>
</ul>

CSS

.listing li p{
font-size: 1em;
color: red;
}

.big p {
font-size: 2em;
color: blue;
}

Answer 1

您可以尝试此操作（Example）

div.big p {
    font-size: 2em;
    color: blue;
}

全部关于specificity，同时检查this article。

更新：此外，您可以更加具体，如this

.listing li div.big p {
    font-size: 2em;
    color: blue;
}

Answer 2

虽然你刚才接受的答案有效，但我建议不要使用那样的CSS选择器。

当您开始扩展网站时，它们不仅会减慢页面加载速度，而且这通常是不好的做法。（阅读Writing efficient CSS selectors，Code smells in CSS）你应该使用效率最高，最直接的CSS选择器，而不是通过在后代后代后面跟踪后代来给自己带来巨大的麻烦。

这是一个更小的解决方案：

HTML

<ul class="listing">
    <li>
        <p> There is plenty of wood.</p>
    </li>
    <li>
       <p class="big">This is extra big</p>
    </li>
</ul>

CSS

.listing p {
    font-size: 1em;
    color: red;
}

.listing .big {
    font-size: 2em;
    color: blue;
}

http://jsfiddle.net/BKLrS/4/

虽然我非常建议进一步这样做：http://jsfiddle.net/BKLrS/5/

如何设置已由其父级设置样式的嵌套元素的样式

2 个答案: