css - 为什么 blueprint css 定义一个 div.class 和 class 具有相同的样式？

Question

在蓝图 CSS 框架的链接代码中，为选择器定义了一种样式，div.class并且只是.class选择器。这不是多余的吗？或者是否有更微妙的原因使用两个选择器定义类？

https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/grid.css（第229-235行）

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

Answer 1

有趣的问题。我没有使用过蓝图，但是如果您选择覆盖div.prepend-top 或 .prepend-top，则只会覆盖该选择器的样式。

这意味着这样做：

.prepend-top { margin-top: 1em; }

将不<div>影响该类的 s 样式（仍然是 1.5-em 上边距），因为div.prepend-top它是一个更具体的选择器，因此将优先考虑<div>元素。

这样做：

div.prepend-top { margin-top: 1em; }

div由于类型选择器，该类的其他元素的样式不受影响。对于append-bottom班级也是如此。

同样，我没有使用蓝图，但我认为它与它期望您的 HTML 的结构方式有关。