CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS 特异性

什么是特异性?

如果有两条或两条以上指向同一元素的冲突 CSS 规则,则浏览器将遵循一些原则来确定哪一条是最具体的,并因此胜出。

将特异性(specificity)视为得分/等级,能够确定最终将哪些样式声明应用于元素。

通用选择器(*)具有较低的特异性,而 ID 选择器具有较高的特异性!

注释: 这种特异性是 CSS 规则不适用于某些元素的常见原因,尽管您可能会认为应该适用。


特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别:

行内样式 - 行内(内联)样式直接附加到要设置样式的元素。实例:<h1 style="color: #ffffff;">。

ID - ID 是页面元素的唯一标识符,例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类,例如::hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素,比如 h1、div、:before 和 :after。


如何计算特异性?

请您牢记计算特异性的方法!

从 0 开始,为 style 属性添加 1000,为每个 ID 添加 100,为每个属性、类或伪类添加 10,为每个元素名称或伪元素添加 1。

请思考以下三个代码片段:

实例

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A 的特异性为 1(一个元素)
  • B 的特异性为 101(一个 ID 引用以及一个元素)
  • C 的特异性为 1000(行内样式)

由于 1 < 101 < 1000,因此第三条规则(C)具有更高的特异性,所以将被应用。



特异性规则 1:

在特异性相同的情况下:最新的规则很重要 - 如果将同一规则两次写入外部样式表,那么样式表中后面的规将更靠近要设置样式的元素,因此会被应用:

实例

h1 {background-color: yellow;}
h1 {background-color: red;}

亲自试一试 »

后一条规则始终适用。


特异性规则 2:

ID 选择器比属性选择器拥有更高的特异性 - 请看以下三行代码:

实例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

亲自试一试 »

第一条规则比其他两条更具体,因此将被应用。


特异性规则 3:

上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下:

实例

From external CSS file:
#content h1 {background-color: red;}

In HTML file:
<style>
#content h1 {
  background-color: yellow;
}
</style>

将适用后一条规则。


特异性规则 4:

类选择器会击败任意数量的元素选择器 - 类选择器(诸如 .intro 会击败 h1、p、div 等):

实例

.intro {background-color: yellow;}
h1 {background-color: red;}

亲自试一试 »


此外,通用选择器以及被继承的值拥有 0 - * 的特异性,body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。