Hack技巧之选择符级hack

最新推荐文章于 2020-08-25 21:07:48 发布

原创最新推荐文章于 2020-08-25 21:07:48 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

15 篇文章

订阅专栏

Hack

3 篇文章

订阅专栏

本文介绍了一种针对不同浏览器及其版本的选择性应用样式的方法——CSS Hack，并提供了具体示例代码，展示了如何针对IE6、IE7、IE8及以上版本以及其他非IE浏览器定制样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法：

<hack> selector{ sRules }

说明：

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个：

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

* 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>选择符级Hack_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
* html .test {
	color: #090;
}
* + html .test {
	color: #ff0;
}
.test:lang(zh-cmn-Hans) {
	color: #f00;
}
.test:nth-child(1) {
	color: #0ff;
}
</style>
</head>
<body>
<div class="test">在不同浏览器下看看我的颜色吧</div>
</body>
</html>