3

在下面的代码中，我不明白为什么我们需要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>
4

3 回答 3

3

通常，子元素将继承其父元素的颜色。

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

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

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

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

选择器：

.marked p {}

比元素选择器本身具有更高的特异性p并覆盖其值。

于 2013-08-11T20:40:27.827 回答
1

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

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

于 2013-08-11T20:33:56.280 回答
0

请注意，不在p标签中的文本将是蓝色的。它在里面的事实marked是无关紧要的。

于 2013-08-11T20:33:48.943 回答