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放后面会覆盖前两个 的样式。