CSS嵌套问题 - 阅读容器信息

Question

当我使用CSS工作时，会出现这个问题，这里是我面对的问题。

我当前的代码是：

<div class="entry"> 
    <div> 
    <blockquote><p>quoted text</p></blockquote> 
    </div> 
</div> 

在我的CSS，我有：

.entry p {margin: 10px} 
blockquote {stuff} 
blockquote p {margin: 0px} 

我认为可以将blockquote内该段从 'BLOCKQUOTE P' 读，而是需要边距：来自'.entry p'的10px。

它为什么从'entry p'而不是'blockquote p'中读取？

Answer 1

虽然通常在CSS中最后一次声明获胜，但只有在they both share the same specificity weight的情况下才会如此。但是，如果2个选择器不具有相同的特异性，则较低的一个将被覆盖，即使它稍后在代码中出现。

由于类名选择具有比标记名选择更高的特异性价值，你的第二个声明被覆盖。

为了给以后一个更高的特异性，你就必须进一步限定它：

.entry blockquote p {margin: 0px} 

或者使用令人恐惧的!important：

blockquote p { margin: 0px !important } 

使用第二种方法只有当第一一个失败（在你的例子中，第一个将会很好）。

Answer 2

这与specificity有关。

也就是说.entry p比blockquote p

将其更改为更高的下面会解决这个问题（虽然也有其他的解决方案）

.entry blockquote p 

Answer 3

你指定的.entry一类，具体 - 不是全球性的。

你试过：

.entry blockquote p 
{ 
    margin: 0px; 
} 

Answer 4

这不是文档顺序对CSS的问题，而是选择特异性。有关更多详细信息，请参见Calculating a selector's specificity。

Answer 5

当我们声明一个类时，它将获得第一个优先于为标签定义的CSS。