html - 如何设置已由其父项设置样式的嵌套元素的样式

Question

初始 CSS 样式不能被专门分配给它的样式覆盖。我应该如何构建我的 CSS 或如何正确设置带有蓝色字体的嵌套元素的样式？

js fiddle

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