type
Post
status
Published
date
Jun 1, 2022
slug
css-selectors
summary
一文牢记CSS选择器优先级，不再遗忘
tags
开发
前端
category
学习思考
icon
password
Property
Jun 20, 2023 02:21 PM
作为一个前端工程师，我CSS写得很烂。
我相信很多前端开发人员都不擅长CSS，那些炫酷的动画，漂亮的渐变效果等感觉离我们非常遥远。因为本质上，用CSS构建出炫酷效果更像是创造性编程（creative programming）。就和用WebGL做出炫酷的3D效果一样，想要随心所欲玩转CSS，就需要在审美、设计和图形学上有深入的涉猎。
但是作为必备基础，每一个前端程序员都应该掌握CSS的基本知识。能够实现基本的布局、分清楚CSS作用规则。而掌握CSS规则的第一步就是牢记CSS选择器优先级规则。
例题
请将下列CSS选择器按照优先级顺序排列:
本题出现了标签、类、伪元素、id选择器等，乍一看无从下手。
下面直接给出正确答案：
优先级规则
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
优先级最高的选择器是ID选择器，其次是类、属性、伪类选择器，最后是标签选择器和伪元素选择器。
但是给元素添加的内联样式 (例如，
style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。下图非常详尽揭示了选择器的规则，我们可以将任一CSS选择器看作一个四维向量，从左到右分别是它的四个维度。当两个选择器比较的时候，从左到右分别比较各维度上的规则数。
我们也可以根据这个四维向量可以计算一个CSS选择器的“得分”，得分越高的，就越“specific”，生效优先级更高。可以简单将其看作十进制累加的数值，很快可以得到“得分”。
下面就是例题中各个选择器的“得分“情况：
至此我们可以轻松对其进行排序了。
上面需要注意的有三点：1）:nth-child、:first-child是伪类选择器；2）伪类选择器优先级比::before选择器优先级高；3）:not()看上去是个伪类选择器，实际上它对优先级不起作用。
!important
不多废话了，一张图记住：
- Author:Louis K
- URL:https://louisk.xyz/article/css-selectors
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts
