CSS —— !important 与 CSS Hack

最新推荐文章于 2023-03-14 16:19:20 发布

转载最新推荐文章于 2023-03-14 16:19:20 发布 · 733 阅读

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了CSS中的!important特性及其作用原理，同时深入探讨了CSS Hack的三种类型：条件Hack、选择符级Hack和属性级Hack，并给出了具体的使用示例。

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

一、!important

使使用的样式具有最高优先级(优先于内联样式、内部样式)。

1、W3C解释：

CSS企图创造一个平衡作者和用户之间的级层样式表。
默认情况下,CSS规则按级层覆盖，例如在.CSS文件中的定义可以被html文件中<style type="text/css"></style>里的定义覆盖，反之不行；书写在下面的定义可以覆盖写在上面的定义，反之不行。
然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

2、语法：

选择器 {cssRule !important;}

3、浏览器特例：

对IE 6，同一个{}里面的cssRule与cssRule !important 样式，后者被认为优先级较低(低于前者)；反之，不在同一个{}里面，具有!important的相同属性的样式优先级较高。如(仅对IE 6)：

.bgGray{
       background-color:white !important;//则在ie6 下背景为灰色，其他版本与浏览器背景为白色
       background-color:gray;
}

.bgColor{
        background-color:white !important;//无论ie6还是其他版本或浏览器下都显示为白色
}

.bgColor{
       background-color:gray;
}

二、CSS Hack

CSS Hack 即针对不同的浏览器(或版本)，通过不同规则写CSS，以达到预期目的。

CSS Hack 有3类：条件Hack 、选择符级Hack、属性级Hack。

1、条件Hack：仅限IE

语法：

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

取值：

<keywords>
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：
指定是否IE或IE某个版本。关键字：空
大于：
选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：
选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：
选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：
选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：
选择除指定版本外的所有IE版本。关键字：!
<version>
目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上

示例：

IE中版本大于6的所显示的样式

<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

说明：

(1)、条件Hack用于选择IE 的不同版本；(2)、若只在所有IE 中可见，则不写版本号；(3)、关键字与IE 之间必须有个空格！

2、属性级Hack：

参考：http://www.phpstudy.net/css3/

语法：

selector{<hack>?property:value<hack>?;}

取值：

_：

选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

*：

选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高

\9：

选择IE6+

\0：

选择IE8+和Opera

[;property:value;];：

选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则

[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

示例：

.test{
	color:#090\9; /* For IE8+ */
	*color:#f00;  /* For IE7 and earlier */
	_color:#ff0;  /* For IE6 and earlier */
}

说明：

上述属性级Hack均需运行在标准模式下，若在怪异模式下，这些Hack将被不同IE 版本相互识别，导致Hack失效。

什么是浏览器的标准模式与怪异模式？

参考博文：

部分原文：

要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

3、选择符级Hack：

参考：http://www.phpstudy.net/css3/

4、各个浏览器的Hack 写法：

参考：http://www.cnblogs.com/xujanus/p/5653964.html