html - 如何在 CSS 样式表中使用条件格式？-6ren

html - 如何在 CSS 样式表中使用条件格式？

转载作者：太空狗更新时间：2023-10-29 15:01:51

我希望为 IE 9 使用一些条件样式 - 但我希望在我的主样式表中包含条件 - 而不是使用第二个样式表或在 HTML 页面中引用它。目前，我将这段代码放在 HTML 页面中，它之所以有效，是因为它覆盖了主样式表中的其他样式:

<!--[if IE 9]>
<style>
nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
</style>
<![endif]-->

但我想在 CSS 工作表中包含这些条件，这样它们都位于一个地方，我不必在每个页面中重复代码。我也宁愿避免只为 IE 9 使用单独的 CSS——我已经为 IE 7-8 使用了一个。我在样式表中试过这个:

<!--[if IE 9]>

nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
<![endif]-->

上面的代码是针对我的 IE 9 的 nav bar 的(它是 nav bar 的修复，因为 IE 9 不支持文本阴影)。

有没有办法在 CSS 样式表中做到这一点？

最佳答案

条件注释仅适用于 HTML，但您可以在 CSS 中利用它。 HTML5Boilerplate 通过向 html 元素添加一个类来实现这一点 (https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

这为您提供了一个仅可用于针对 IE 的 Hook :