CSS选择器总结（分类、优先级）

hedge_hog 发布于2019-08-29 12:22 / 728人阅读

摘要：样式选择器权重优先级如下的权重为选择器的权重为类选择器的权重为伪类选择器的权重为属性选择器的权重为标签选择器的权重为伪元素选择器的权重为通配符的权重为综合上述权重优先级来看，正确的优先级排序应该是内联样式类伪类属性选择标签伪元素继承通配符

CSS选择器是编写CSS代码时的一个核心概念，选择器定义了相应的样式将会影响到文档中的哪些部分，以下是自己在学习及工作过程中对CSS选择器的一些总结，希望能帮助到有需要的新手同学，同时也帮助自己巩固基础，加深记忆。

样式选择器权重优先级如下：

important的权重为 1, 0, 0, 0

ID选择器的权重为 0, 1, 0, 0

类选择器的权重为 0, 0, 1, 0

伪类选择器的权重为 0, 0, 1, 0

属性选择器的权重为 0, 0, 1, 0

标签选择器的权重为 0, 0, 0, 1

伪元素选择器的权重为 0, 0, 0, 1

通配符的权重为 0, 0, 0, 0

综合上述权重优先级来看，正确的优先级排序应该是：

important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符

GPU云服务器云服务器选择器总结 css选择器基础选择器css 最高优先数优先调度算法实验总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111852.html

前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

魏宪会 2019-08-29 18:35 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

sixleaves 2019-08-02 16:13 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

NotFound 2019-08-23 16:53 评论0 收藏0
CSS 选择器

摘要：选择器分类标签选择选择器选择器后代选择子代选择相邻选择通配符选择否定选择器属性选择器伪类选择器伪元素选择器属性选择器选择器描述用于选取带有指定属性的元素。在元素之后添加内容选择器匹配每个已启用的元素大多用在表单元素上。 CSS 选择器分类标签选择 id选择器 class选择器后代选择（div a）子代选择（div > p）相邻选择（div + p）通配符选择（*） ...

APICloud 2019-08-30 15:55 评论0 收藏0