CSS选择器以及优先级

CSS的选择器种类以及优先级问题？

今天我想分享的内容是关于css选择器以及它的优先级问题，大家都知道，在学习的前端的过程中css是基础，也是必不可少的一部分，那我觉得了解选择器的种类以及权重问题，对于我们代码是否整齐，是否可以一目了然起到很重要的作用。以下便是我总结的关于选择器的系列知识点，如有疑问，可以交流哦~
css选择器分类：
（1）ID选择器：
快捷键创建：div#elem + tab键 ->

ID选择器的规范：
1.在一个页面中，ID是唯一值。( 身份证 )
2. 命名规范：字母 _ - 数字（命名的第一位不能是数字）

（2）CLASS选择器（类选择器）

1. class选择器是可以复用的。跟ID选择器有很大区别的，复用代码的能力非常强。（在网页中使用的频率非常强）
2. 可以添加多个class样式。跟ID区别：ID只能写一个，CLASS可以写多个，通过空格隔开。
3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。看CSS中的顺序，并不是看class属性中的顺序。

（3）标签选择器（TAG选择器）
div{} ->

注：不常用的。
使用的场景： 去掉默认样式： 1. ul{ list-style:none;} a{ text-decoration:none;}

（4）层次选择器： #box div{}
层次选择器
后代 : M N （找M下的所有N）
父子 : M > N （找M下的子标签N
相邻 : M + N
特点： ~ 是找M标签下面的所有N标签
+ 是找M标签下相邻的N标签
无论用~ + 都是找下面的兄弟，上面的兄弟是不会有任何作用的。

（5）群组选择器（分组选择器）： div , p , h1{ color:red; }

（6）通配选择器：*{} ( *就是所有标签的意思 )
使用的场景：有时候需要去掉所有标签的默认样式

（7）属性选择器： M[] : [ class=“elem” ] * ^ $
组合的：M[][][]{}

（8）伪类选择器：
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
主要这四个伪类是针对a标签的
:link 访问前的选择器 ( 只能加给a标签 )
:visited 访问过后的选择器 ( 只能加给a标签 )
:hover 鼠标移入的选择器 ( 所有标签都能添加 )
:active 鼠标按下的选择器 ( 所有标签都能添加 )
注：
a标签如果四个伪类都添加的话，那么是有顺序的 L V H A
一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
其他伪类选择器：
:before :after ( 特点，不用单独在创建一个标签，就可以给文本添加样式 )
input:checked{ width:100px; height:100px;}
input:disabled{ width:100px; height:100px;}
当标签能够获取焦点的时候，会触发 :focus
input:focus{ background:Red;}
结构性伪类选择器：
:nth-of-type()、 :nth-child()
:first-of-type、 :first-child
:last-of-type、 :last-child
:only-of-type、 :only-child
()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)
以上就是大概的CSS选择器分类以及注意的点，常用的一般是：id class 层次 群组 伪类 …

CSS优先级？
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式
    内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级
    style行间 > id > class > tag > * > 继承
    权重 1000   0100   0010   0001  ...

!important 权重 -> 10000 ( 建议不要乱用 , 非规范写法 )
    场景：紧急情况下才去用。

标签 + 类 和 单类？
    标签 + 类 > 单类

群组和单一样式？
    群组选择器与单一选择器的优先级相同，靠后写的优先级高。

层次选择器？

    权重： 把对应的数值加起来

    约分：把相同的相同的选择器约掉

    建议：层次选择器最好不要超过三层

（如有不同的见解，可以沟通交流哦~）