Question

请考虑以下CSS。请注意，在这种情况下没有定义或生效的其他CSS规则：

* {
    position: absolute;
    color: red;
}

div {
    position: static;
    color: blue;
}

当我添加带有一些文本的div，即live here时，div中的文本不再遍历整个屏幕。就好像div的width属性设置为10％。如果我从通配符中删除position：absolute声明，则div返回到normal（文本在整个屏幕上移动）。这对我来说很困惑，因为我已经用位置定义了所有div：静态声明。我在使用和不包含着名的“reset.css”样式表的情况下尝试了这个，我得到了相同的结果。

起初我认为通配符规则可能会占用CSS中的div规则。这本来就很简单。但是，我将通配符规则的color属性设置为红色，div规则的color属性设置为蓝色，文本显示为蓝色。所以答案不能简单地说通配符规则优先于div规则。

我认为有一点可能是相关的：绝对定位的元素相对于其第一个定位（非静态）祖先元素定位。在这种情况下，身体没有这样的祖先，因此这可能只是由于身体被设置为绝对定位但没有定位祖先元素而引起的某种无声错误。

有谁知道这种奇怪行为的原因是什么？

Answer 1

position: absolute适用于<div>的父母它使它们收缩以适合它们的内容 - <div>。

的文本

由于<div>的布局区域不再包含整页宽度，因此不会拉伸。

您可以通过添加width: 100%并删除边距和填充来解决此问题。

Answer 2

同时设置html和/或body位置static：

Demo with html { position: static; }
Demo with body { position: static; }

或者，change your selector to body *：

body * {
    position: absolute;
    color: red;
}
div {
    position: static;
    color: blue;
}

是否无法覆盖CSS中通配符“*”的某些属性？

2 个答案: