Question

我有这段代码

*html #alertBox {
    height:100px;
}

#modalContainer > #alertBox {
    position:fixed;
}

这是由css支持的，我在其他网站上找到了这段代码（我忘记了链接）

Answer 1

*html #alertBox {
    height:100px;
}

这是一个错误的明星HTML。 Star-HTML是一种CSS hack，通常用于在IE6上定位规则。

规则中的星型HTML前缀不应与任何内容匹配，因为根元素（*）上方没有元素（html）。但是由于该浏览器中的错误，它在IE中直到版本6。

但是，要成为有效规则，*和html之间必须有空格。当前代码无效CSS：验证器会抱怨并且浏览器可能会使用它做出意想不到的事情。实际上，在当前的浏览器中没有区别：IE6-7允许无空间语法，其他浏览器忽略整个规则。但你不应该真的依赖它。

#modalContainer > #alertBox {
    position:fixed;
}

这是一个子选择器：当它是modalContainer的直接子项时，它选择alertBox。

>是IE6根本无法理解的，因此结果是在IE6（不支持position: fixed）之外的所有浏览器上定位规则。这使得它或多或少与明星HTML黑客相反。显然它在这里被用于此目的，否则选择器（包括两个唯一ID）是非常多余的。

Answer 2

这称为star HTML hack，可帮助您将某些CSS规则传递给旧版本的Internet Explorer。

所以第一个例子只会将#alertBox的高度设置为100像素，如果使用的浏览器容易受到明星HTML黑客攻击：

第二个示例（#modalContainer > #alertBox）将应用于ID为alertBox的任何元素，该元素也是另一个 直接子 的元素ID为modalContainer的元素。

标记必须看起来像这样：

<div id="modalContainer">
    <div id="alertBox"></div>
</div>

而不是这个：

<div id="modalContainer">
    <div>
        <div id="alertBox"></div>
    </div>
</div>

这两个规则都是有效的CSS。