css-选择器

作为一个前端码农，不少接触CSS，懂CSS各种选择器以及权重值计算很重要，想当然的觉得CSS选择器没什么难点的，就像我这样的，反正一层一层加，肯定能覆盖我之前写的，那最后的代码后期维护起来想想都怕怕哦。所以今天利用六分钟的时间学学CSS选择器以及权重计算还是很重要的。

常用的CSS选择器概括

通配符选择器（*）-0
标签选择器-1
伪元素（::after,::before,::selection,::first-line,::first:letter）-1
类选择器-10
伪类选择器（:link,:hover,:active,:visited,:root,:target,:not）-10
属性选择器（[title],[title=value]）-10
id选择器-100
内联样式-1000

作为补充，
1. 还有 后代选择器 ，亲子选择器>，兄长选择器~，相邻选择器+,权重拆分为两个算再计算求和
2. !important 最重要权重，优于一切，对于分别给类选择器和标签选择器样式添加!mportant，按其他选择器权重和高的样式为准

---

通配符选择器 *

通配符选择器都是怎么用呢？

一般清除默认样式的时候，用通配符设置，通配符设置的样式覆盖了默认样式，默认样式既是继承，继承是没有权重的
因为继承无权重，所以可以被 通配符 权重为0 的选择器设置的样式覆盖

标签选择器，伪元素选择器

这两个归为权重值相同的一类，可以理解。渲染完页面，控制台elements展示的源码中，伪元素作为和标签一样展示。

类选择器，伪类选择器，属性选择器

理解为挂在类选择器上的，想想是不是？
比如.classs,.class[title],.class[title='text'],.class:hover,:class:active

id选择器

从理解js获取dom节点来看，getElementByID,获取到的只有一个，可想而知比class权重也高，只能唯一设置，享有唯一性。

内联选择器

<h1 style="font-size:14px;"></h1>

记住就近原则，可想而知内联选择器权重值最大---1000，上面的依次减一个0，最后通配符0

除了权重之外

以上选择器是有权重计算的，还常常见到因为顺序以及设置css来源不同，导致渲染出结果不同的情况，解析：

1. 就近原则
   内联样式一定优先于外联样式，
   同等权重时后设置样式一定大于前设置的样式，
   用户自定义的 > 开发人员设置的 > 用户代理默认的（浏览器默认的）
2. 由此推荐链接样式排序(link-visited-hover-active, LVHA)

   其都是伪类元素，权重一样，后覆盖前，所以为了防止点击后（visited）以及 未访问(:link)，:hover
   和:active不能触发，设置了LVHA原则。
   因为任何链接不是已访问，就是未访问，所以将lV放后面会覆盖前两个 的样式。