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 同样如此类。

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