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个选择器的特异性不同，则较低的选择器将被覆盖，即使它稍后出现在代码中。

由于 classname 选择器具有比标记名选择器更高的特异性值，因此将覆盖您的第二个声明。

为了使后者具有更高的特异性，您必须进一步限定它：

.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的第一个首选项。