css基础知识之选择器使用示例

在编写CSS代码的时候，我们会出现多个样式规则作用于用一个元素的情况，例如

复制代码

代码如下:
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>

有一样东西可以无视特殊性，那就是 !important。使用 !important 可以把任何样式规则标记为重要

复制代码

代码如下:
.nav-main {
background-color: blue !important;
color: #666;
}

上一篇：表单文本框尺寸调整与按钮对齐问题(分成了两行)

下一篇：css3新增颜色表示方式分享

发表评论