Question

在下面的代码中，我不明白为什么我们需要将color:white放在单独的.marked p中？如果我在color:white内marked进行操作，为什么它不起作用？有人可以解释一下吗？提前致谢！ :)

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

Answer 1

通常，子元素将inherit其父级的颜色。

但是，在这种情况下，您已经为所有<p>元素专门添加了颜色样式：

p { color:blue; text-align:center; }

这将覆盖可能在.marked中为此部分标记设置的任何继承样式：

<div class="marked">
    <p>This paragraph has not blue text.</p>
</div>

选择器：

.marked p {}

比元素选择器p本身高specificity并覆盖其值。

Answer 2

您需要这样做，因为p选择器的特异性少于.marked。这就是为什么你需要使用.marked p来改变颜色。

您可以在此处了解CSS特异性：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

请注意，不在p标记中的文字将为蓝色。它在marked内的事实是无关紧要的。

CSS嵌套选择器

3 个答案: