css零到一中级教程025：CSS 特异性

2024-05-28 08:43:23

什么是特异性？

如果有两条或两条以上指向同一元素的冲突 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: #cont

css零到一中级教程025：CSS 特异性相关推荐

css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
css零到一基础教程044：CSS 图标
如何添加图标向 HTML 页面添加图标的最简单方法是使用图标库,比如 Font Awesome. 将指定的图标类的名称添加到任何行内 HTML 元素(如 <i> 或 <span&g ...
css零到一高级教程007：CSS 阴影效果
CSS 阴影效果通过使用 CSS,您可以在文本和元素上添加阴影. 在我们的教程中,您将学习如下属性: text-shadow box-shadow CSS 文字阴影 CSS text-shadow ...
css零到一基础教程007：CSS RGB 颜色
RGB 值在 CSS 中,可以使用下面的公式将颜色指定为 RGB 值: rgb(red, green, blue) 每个参数 (red.green 以及 blue) 定义了 0 到 255 之间的颜 ...
css零到一基础教程009：CSS HSL 颜色
HSL 值在 CSS 中,可以使用色相.饱和度和明度(HSL)来指定颜色,格式如下: hsla(hue, saturation, lightness) 色相(hue)是色轮上从 0 到 360 的度 ...
css零到一基础教程006：CSS 颜色
指定颜色是通过使用预定义的颜色名称,或 RGB.HEX.HSL.RGBA.HSLA 值. CSS 颜色名在 CSS 中,可以使用颜色名称来指定颜色: 实例: <!DOCTYPE html> ...
css零到一基础教程042：CSS 谷歌字体
谷歌字体如果您不想使用 HTML 中的任何标准字体,则可以使用 Google Fonts API 向页面添加数百种其他字体. 只需添加一个样式表链接并引用您选择的字体系列: 实例 <!DOCT ...
css零到一基础教程005：CSS 注释
CSS 注释注释用于解释代码,以后在您编辑源代码时可能会有所帮助. 浏览器会忽略注释. 位于 <style> 元素内的 CSS 注释,以 /* 开始,以 */ 结束: 实例 <!D ...
css零到一基础教程018：CSS 边框颜色
CSS 边框颜色 border-color 属性用于设置四个边框的颜色. 可以通过以下方式设置颜色: name - 指定颜色名,比如 "red" HEX - 指定十六进制值,比如 ...

最新文章

热门文章