Question

我有一个CSS重置，将余量设为零。然后进一步在代码中添加所有元素的底距。但这不起作用，我也找不到原因。

我尝试使用！important规则，但这也不起作用，也不是我所追求的解决方案。在我看来，特异性应该起作用，因为它们都具有0,0,1的特异性，最后一条规则应该适用。

还是*规则具有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;}

使用*选择器的CSS特异性

1 个答案: