CSS选择器

权重

根据不同的样式选择器，有不同的权重，而最终呈现的效果是根据选择器的权重和排列顺序确定的。
css采用覆盖式渲染，相同权重下总是会运用最新的样式【后来居上模式】

名称	权重	选择器
内联样式	1000	无（使用style属性直接编写的属性）
ID	100	#id
类	10	.classname
标签	1	p a div ...
伪元素	1	::after ::before ::first-letter ::first-line
通配符	0	*
属性	10	[attr]...
伪类	10	:active :focus :focus-within :link :visited
父子	分别计算	parent > children
后代	分别计算	parent children
相邻	分别计算	element + element
兄弟	分别计算	element ~ element

权重计算是加权计算，依次将各个基础选择器的权重加起来得到最终的权重

!important

在css权重中，这个属性将扮演很重要的角色。这个属性将直接提升该选择器的权重为顶级。因此，不可以随便使用

[attribute] 选择器介绍

属性选择器通配包括以下几种

名称	说明
[attribute]	匹配包含该属性名称的元素
[attribute=value]	匹配包含该属性名称和值的元素
[attribute|=value]	匹配包含该属性名称且开头为value的元素，必须是整个单词
[attribute~=value]	匹配包含该属性名称且值包含value的元素
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	选择包含该属性名称且包含该值的元素

不管是何种匹配，各种选择器的权重都是10，也就是说看起来是有匹配精准度的影响
 但是本质上都属于一般属性选择器，遵循选择器权重的规则

其他选择器

名称	说明	作用
A>B	父子选择器	匹配A元素直接下一级的B元素集合
A B	后代选择器	匹配A元素的下的所有B元素集合
A+B	相邻选择器	AB元素在相同的父元素下，匹配紧接着A元素的B元素
A~B	兄弟选择器	AB在相同父元素下，匹配A元素之后的B元素集合

不管是何种匹配，各种选择器的权重都是AB各自基础选择器的加权
也就是说看起来是有匹配精准度的影响，但是本质上都对符号表示没有影响，只遵循选择器权重的一般规则

匹配效率

我们需要对渲染页面的速度有所保证，那最直接相关的就是渲染效率。而影响渲染效率的就是样式的匹配效率
举个例子：div a .name 和 .name a div
在两个选择器都能匹配到相同元素的情况下，看起来右侧速度更快，但是事实上左侧速度更快。
实际上是因为，css渲染时，加载器是通过从右向左依次匹配，因此，快速缩小范围，以便更快的匹配到所需要的元素内容。
不过这个例子不算太恰当，但是事实上就是如此。

顺带一提，属性和伪类效率很低，至于为什么低，还不是很明确

优化

在保证可读性的前提下尽量使用class选择器

<div class="nav">
  <span class="nav-item"></span>
  <span class="nav-item"></span>
  <span class="nav-item"></span>
</div>

在写样式时

.nav-item {  /**/ }

而不必要的使用

span.nav-item {  /**/ }

或者

.nav .nav-item {  /**/ }

因为如果限定选择内容，那么就不需要继续向左寻找。
优先考虑这种以类名递进关系演进的class效率上会更高一些