css基础知识之选择器使用示例
2014-04-16 16:32
721 查看
在编写CSS代码的时候,我们会出现多个样式规则作用于用一个元素的情况,例如
以上三个样式规则都会作用于 ID 值为 "navigation" 的 nav 标签,最终哪个样式规则会生效呢,这取决于选择器的特殊性(或优先级)高低,选择器特殊性高的样式会覆盖特殊性低的样式,经过测试 nav 标签的背景会显示为 green 绿色。
那么选择器特殊性是如何计算的呢?
通常,我们使用四个以逗号分隔的数字来表示特殊性,比如:
1.每个元素选择器贡献特殊性为 0,0,0,1;
2.每个类、伪类或者属性选择器的特殊性为 0,0,1,0;
3.每个ID选择器的特殊性为 0,1,0,0.
计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加,比如
注:多类选择器有多少个类就计算多少个类,不支持多类选择器的 IE6 会理解为一个类
比较选择器特殊性高低直接从左向右依次比较,数字大的则优先级更高,如果相同就比较下一位,所有位都相同则优先级是一样高,当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式
每个级别的优先级值是相互独立的,13个元素选择器写在一堆也不会比1个类选择器的特殊性高
第一个0是用于行内样式的,且仅用于行内样式
有一样东西可以无视特殊性,那就是 !important。使用 !important 可以把任何样式规则标记为重要
基本上,任何重要的样式规则都可以覆盖没有标记为重要的样式规则,
上面的代码会得到一个绿色 green 的链接,第一个规则有非常高的特殊性(0,2,0,2),
但是在 !important 面前一样没用,除非我们给第一个规则也标记为重要
这时候链接就变为红色 red 了,都标记为重要的情况下,则会使用前面提到的特殊性规则来解决,
所以使用 !important 的时候应当权衡,尽量不要用
另外,IE6 是支持 !important 的,只是不完全支持而已,当在同一个选择器中,在标记为重要的样式规则之后又重新定义了此样式则 !important 将失效
再有就是 IE6/7 可以允许在 !important 后面添加一些文字,依然能识别
header> <nav class="nav-main" id="navigation">Here background</nav> </header> header nav { background-color: red; }#navigation { background-color: green;}</p> <p>.nav-main { background-color: blue; }
以上三个样式规则都会作用于 ID 值为 "navigation" 的 nav 标签,最终哪个样式规则会生效呢,这取决于选择器的特殊性(或优先级)高低,选择器特殊性高的样式会覆盖特殊性低的样式,经过测试 nav 标签的背景会显示为 green 绿色。
那么选择器特殊性是如何计算的呢?
通常,我们使用四个以逗号分隔的数字来表示特殊性,比如:
1.每个元素选择器贡献特殊性为 0,0,0,1;
2.每个类、伪类或者属性选择器的特殊性为 0,0,1,0;
3.每个ID选择器的特殊性为 0,1,0,0.
计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加,比如
div ul ul li /* 0,0,0,4 4个元素选择器 */</p> <p>div.aside ul li /* 0,0,1,3 1个类选择器,3个元素选择器 */</p> <p>a:hover /* 0,0,1,1 1个伪类选择器,1个元素选择器 */</p> <p>div.navlinks a:hover /* 0,0,2,2 1个类选择器,1个伪类选择器,2个元素选择器 */</p> <p>#title em /* 0,1,0,1 1个 ID 选择器,1个元素选择器 */</p> <p>h1#title em /* 0,1,0,2 1个 ID 选择器,2个元素选择器 */</p> <p>* /* 0,0,0,0 1个通用选择器 */
注:多类选择器有多少个类就计算多少个类,不支持多类选择器的 IE6 会理解为一个类
比较选择器特殊性高低直接从左向右依次比较,数字大的则优先级更高,如果相同就比较下一位,所有位都相同则优先级是一样高,当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式
每个级别的优先级值是相互独立的,13个元素选择器写在一堆也不会比1个类选择器的特殊性高
第一个0是用于行内样式的,且仅用于行内样式
<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->
有一样东西可以无视特殊性,那就是 !important。使用 !important 可以把任何样式规则标记为重要
.nav-main { background-color: blue !important; color: #666; }
基本上,任何重要的样式规则都可以覆盖没有标记为重要的样式规则,
<div id="gohome"><a href="/" id="home">Home</a></div> div#gohome a#home { color: red; }</p> <p>div a { color: green !important; }
上面的代码会得到一个绿色 green 的链接,第一个规则有非常高的特殊性(0,2,0,2),
但是在 !important 面前一样没用,除非我们给第一个规则也标记为重要
div#gohome a#home { color: red !important; }</p> <p>div a { color: green !important; }
这时候链接就变为红色 red 了,都标记为重要的情况下,则会使用前面提到的特殊性规则来解决,
所以使用 !important 的时候应当权衡,尽量不要用
另外,IE6 是支持 !important 的,只是不完全支持而已,当在同一个选择器中,在标记为重要的样式规则之后又重新定义了此样式则 !important 将失效
.header { color: red !important; /* 标准浏览器 red */ color: green; /* IE6 green !important 失效 */ }
再有就是 IE6/7 可以允许在 !important 后面添加一些文字,依然能识别
.header { color: red !important ie; /* ie6/7 red */ }
相关文章推荐
- CSS基础知识:常见选择器示例
- [3] ffmpeg基础知识以及使用示例
- css基础-html中使用css、基本选择器、类选择器、id选择器、通用选择器、符合选择器、css权重
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- H5基础知识第七课时(CSS负边距的使用)
- CSS基础:基本选择器分类和使用
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- [CSS]层叠样式表中的四种基础选择器的使用教程
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- CSS之基础重点选择器的使用
- Java基础知识强化之IO流笔记72:NIO之 NIO核心组件(NIO使用代码示例)
- css基础 a:link/visited... 链接伪类选择器 简单示例
- 使用CSS绘制基础的对话框图案的代码示例
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- css基础 并集选择器 多个标签用逗号隔开,使用相同的样式
- css基础 class选择器 简单示例
- Notification(一)——基础知识使用示例
- css基础 class选择器 简单示例
- CSS 基础知识二 选择器
- css基础 id选择器 简单示例