您现在的位置是：网站首页> 编程资料编程资料

css基础知识之选择器使用示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2023-10-26 303人已围观

简介 这篇文章主要介绍了css基础知识中的选择器使用示例,需要的朋友可以参考下

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


复制代码
代码如下:

header>


header nav {
background-color: red;
}#navigation { background-color: green;}

.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个元素选择器 */

div.aside ul li /* 0,0,1,3 1个类选择器，3个元素选择器 */

a:hover /* 0,0,1,1 1个伪类选择器，1个元素选择器 */

div.navlinks a:hover /* 0,0,2,2 1个类选择器，1个伪类选择器，2个元素选择器 */

#title em /* 0,1,0,1 1个 ID 选择器，1个元素选择器 */

h1#title em /* 0,1,0,2 1个 ID 选择器，2个元素选择器 */

* /* 0,0,0,0 1个通用选择器 */

注：多类选择器有多少个类就计算多少个类，不支持多类选择器的 IE6 会理解为一个类

比较选择器特殊性高低直接从左向右依次比较，数字大的则优先级更高，如果相同就比较下一位，所有位都相同则优先级是一样高，当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式

每个级别的优先级值是相互独立的，13个元素选择器写在一堆也不会比1个类选择器的特殊性高

第一个0是用于行内样式的，且仅用于行内样式

复制代码
代码如下:



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

复制代码
代码如下:

.nav-main {
background-color: blue !important;
color: #666;
}

基本上，任何重要的样式规则都可以覆盖没有标记为重要的样式规则，


复制代码
代码如下:


div#gohome a#home {
color: red;
}

div a {
color: green !important;
}


上面的代码会得到一个绿色 green 的链接，第一个规则有非常高的特殊性（0,2,0,2），

但是在 !important 面前一样没用，除非我们给第一个规则也标记为重要


复制代码
代码如下:

div#gohome a#home {
color: red !important;
}

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选择符类型详细介绍CSS中的属性选择符和结构化伪类详解CSS中的类和ID选择符CSS中的选择符实际使用指南简介CSS中的各种选择符几个特殊的CSS选择符使用介绍CSS 选择符的用法和实例详解如何编写高效的 CSS 选择符

下一篇：用css实现十字的布局示例代码网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘收罗CSS布局中有关水平和垂直居中的N种方法div+css布局中选择使用html标签的方法CSS3 Columns分列式布局方法简介css网站布局实录学习笔记第三部分网页布局与定位css网站布局实录学习笔记第一部分CSS div布局需要注意的两点使用div+css布局过程中在什么时候使用table呢DIV CSS布局中position属性用法深入探究适合新手的CSS网页布局小技巧整理

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网