forked from doyoe/css-handbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
!important.htm
169 lines (169 loc) · 5.28 KB
/
!important.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>!important</title>
<meta name="Description" content="CSS3参考手册之: !important" />
<meta name="Keywords" content="!important, css优先级" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
<div class="from">
<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
<span>»</span>
<a href="../index.htm" id="category" rel="rules" name="!important">语法与规则列表</a>
<span>»</span>
</div>
<div class="to">
<span class="label">相关内容：</span>
<div class="g-combobox g-transition">
<a href="?" class="g-transition target">
<strong>其它语法与规则参考</strong>
<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
</a>
<div class="g-transition list">
<ul>
<!-- 插入快速分类导航 -->
</ul>
</div>
</div>
</div>
</nav>
<header id="hd">
<section id="title" class="g-mod">
<h1 class="tit">!important</h1>
<ul class="info">
<li><strong>版本：CSS1</strong></li>
</ul>
<!-- 插入浏览器信息 -->
</section>
</header>
<section id="bd">
<section id="syntax" class="g-mod g-attr">
<h2 class="tit">语法：</h2>
<div class="cont">
<p><strong>Selector</strong> { sRule!important; }</p>
</div>
</section>
<section id="intro" class="g-mod g-attr">
<h2 class="tit">说明：</h2>
<div class="cont">
<strong>提升指定样式规则的应用优先权。</strong>
<ul>
<li>
<p class="glight">IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：</p>
<div class="gquote">
<p class="gquote-tit"><strong>示例代码：</strong></p>
<blockquote class="gquote-cont"><code><xmp>div {
color: #f00 !important;
color: #000;
}</xmp></code></blockquote>
<p class="gquote-info">在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00</p>
</div>
</li>
<li>
<p class="glight">IE6及以下浏览器要使!important生效，可用以下代码：</p>
<div class="gquote">
<p class="gquote-tit"><strong>示例代码：</strong></p>
<blockquote class="gquote-cont"><code><xmp>div {
color: #f00 !important;
}
div {
color: #000;
}</xmp></code></blockquote>
<p class="gquote-info">在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00</p>
</div>
</li>
</ul>
</div>
</section>
<section id="compatible" class="g-mod g-attr">
<h2 class="tit">兼容性：</h2>
<div class="cont">
<ul class="support-type">
<li><span class="support">浅绿</span> = 支持</li>
<li><span class="unsupport">红色</span> = 不支持</li>
<li><span class="partsupport">粉色</span> = 部分支持</li>
</ul>
<table class="g-data">
<thead>
<tr>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Opera</th>
<th>iOS Safari</th>
<th>Android Browser</th>
<th>Android Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="partsupport">6.0 <sup><a href="#support1">#1</a></sup></td>
<td class="support" rowspan="2">2.0+</td>
<td class="support" rowspan="2">4.0+</td>
<td class="support" rowspan="2">3.1+</td>
<td class="support" rowspan="2">3.5+</td>
<td class="support" rowspan="2">3.2+</td>
<td class="support" rowspan="2">2.1+</td>
<td class="support" rowspan="2">18.0+</td>
</tr>
<tr>
<td class="support">7.0+</td>
</tr>
</tbody>
</table>
<ol class="support-info">
<li id="support1">IE6及更早浏览器下，!important在同一条规则集内不生效。</li>
</ol>
</div>
</section>
<section id="example" class="g-mod g-attr">
<h2 class="tit">示例：</h2>
<div class="cont">
<textarea cols="90" rows="10">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>!important_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
color: #f00 !important;
color: #000;
}
.test2 {
color: #f00 !important;
}
.test2 {
color: #000;
}
</style>
</head>
<body>
<div class="test">同一条样式内，!important将在IE6及以下浏览器中失效</div>
<div class="test2">在分散的样式条目内，IE6及以下浏览器对!important的支持与其它浏览器一致</div>
</body>
</html>
</textarea>
<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
</div>
</section>
</section>
<footer id="ft">
<aside id="rights" class="g-mod">
<!-- 插入浏览器及版权信息 -->
</aside>
</footer>
<script src="../js/jquery.js"></script>
<script src="../js/inner.js"></script>
</body>
</html>