选择器优先级如何计算？

哈，说到CSS选择器优先级这事儿，得聊聊我以前在做网站开发的时候那些事儿。
说实话，我刚入门那会儿，这选择器优先级的东西真是绕得我头都大了。
现在想想，其实也没那么复杂。

记得那会儿，我们经常在内联样式里直接写CSS，比如这样：
这是一段红色的文字

当时也没想明白，为啥直接写在元素里的样式就能生效，后来才知道，这内联样式优先级是最高的，直接1 000分满分，其他的选择器都得靠边站。

再后来，我们学会了用ID选择器，像这样：
css myId { color: blue; }
这ID选择器优先级高，1 00分，比类选择器（1 0分）和标签选择器（1 分）都高。

类选择器，比如说.myClass，属性选择器，比如[type="text"]，这两玩意儿优先级是一样的，都是1 0分。

然后就是那些元素选择器，比如div、p、a，这些优先级最低，只有1 分。

记得有一次，我写了一个样式表，想给所有的p标签加个边框，但结果发现，有个p标签里的文字颜色没变，原来它是内联样式改的，优先级高，直接把我的样式给覆盖了。

还有一点，就是样式规则的应用顺序。
我以前以为，先写的样式规则优先级高，后来才知道，这优先级是按选择器本身来的，不管你写在哪。

举个例子，我写了两个样式规则，一个.myClass，一个p，虽然.myClass写在了后面，但它优先级高，所以它应用的样式会覆盖掉p的。

最后，说个计算优先级的小技巧。
我们按照权重值来计算，内联样式1 000分，ID选择器1 00分，类选择器、属性选择器和伪类选择器1 0分，元素选择器和伪元素选择器1 分。
把这些权重值加起来，就能得出选择器的总权重，权重值越高，优先级越高。

这么一分析，CSS选择器优先级其实也就这么回事儿。
不过，要想真正掌握，还得多写多练，慢慢积累经验。

为什么::first-line 选择器优先级会高于 id 选择器？

这就是坑，别用::first-line覆盖ID选择器。

实操提醒：避免在父元素上使用::first-line，直接针对目标元素定义样式。

CSS选择器世界-基础部分笔记

嘿，聊点实际的CSS选择器坑。
我当年就是被这些搞晕的。

去年在杭州做项目，有个需求是改一个旧系统。
他们那个CSS选择器用得一言难尽，后代选择器嵌套了五层，直接跟迷宫似的。
后来发现，改一个按钮样式，得改十几个地方，因为动了深层嵌套的规则。
这就是为啥现在强调多用类名，少用标签选择器，特别是深嵌套的。

还有类名和ID大小写的事儿。
我之前在某个系统里遇到过，用JavaScript动态生成ID，有时候是大写有时候是小写，搞得样式根本应用不上。
后来发现HTML标签名是大小写不敏感的，比如DIV和div浏览器都认，但属性值、类名、ID是敏感的。
比如[type="text"]就不认type="TEXT"。
这事儿你得记住，别瞎写。

伪类和伪元素我也踩坑。
比如:hover，有时候写错了，或者没加引号，浏览器根本不认。
还有::before和::after，定位元素特定部分，写错了位置或者没加双冒号，那效果就没了。
我记得有次写::first-line，结果用户反馈文字根本没变化，后来发现是双冒号写成单冒号了。

选择器优先级也是大坑。
有次改别人写的代码，一个ID选择器被三个类选择器盖过去了，样式完全不对。
后来花了半天找原因，就是忘了ID的优先级是最高的。
还有更逗的，有人写了!important，结果整个样式都乱套了，最后只能全删了重写。
所以现在写CSS，能不用!important就不用，真要用那也得想想后果。

属性选择器我当年也不太会用，后来慢慢熟练了。
比如[attr^="val"]，属性值以val开头，这在做某些组件化设计的时候很有用。
还有[attr$="val"]，以val结尾。
写代码的时候顺手用一下，比纯类名有时候更精确。

总之，CSS选择器这东西，别钻牛角尖，能简单就简单。
多用类名，少用标签和深嵌套。
优先级搞懂，别瞎用!important。
属性选择器灵活用，但别滥用。
这么着，至少能少踩点坑。