使用 * 选择器的 CSS 特异性

Question

我有一个 css 重置，我将边距设置为零。然后，在代码的下方，我想为所有元素添加一个边距底部。但它不起作用，我找不到原因。

我

尝试使用！important规则，但这也不起作用，也不是我想要的解决方案。在我的脑海中，特异性应该起作用，因为它们都具有特异性 0,0,1，并且应该应用最后一个规则。

还是像 * 规则具有特异性 0,0,0,0 并且不会"击败"html 和 body 标记之后的其他选择器的特异性，因为它们具有特异性 0,0,1？

html,body,address, article, aside, footer, header, h1, h2, h3, h4,
h5, h6, hgroup, main, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body > * {
    margin-bottom: calc(1 * var(--line-height));
}

我追求的结果是body > *应该适用。

Answer 1

如果你想定位所有元素，你可以使用

* {
   margin-bottom: 1rem;
}

>符号是一个子组合器，它仅针对作为第一个元素的直接后代的元素。

我的猜测是，这是对目标元素进行样式设置，但这些不是您希望成为目标的元素。

为了更好地可视化这一点，请尝试设置这些元素的边框样式：

body > * {
    border: 10px solid red;}