CSS选择器包含伪类和伪元素以及CSS权重优先级

第一部分：CSS选择器

1.基本选择器

选择器	关键字
通用选择器	*
元素选择器	p
类选择器	.
ID选择器	#
属性选择器	[autoplay] [attr=value]

2.分组选择器

关键字	含义
div,span	匹配所有的div和span

3.组合器

选择器	关键字	含义
后代组合器	div span	匹配所有位于任意div元素之内的span元素
直接子代组合器	ul > li	匹配ul内的所有li
一般兄弟组合器	p ~ span	匹配同一父元素下，p元素后的所有span
紧邻兄弟组合器	h2 + p	匹配紧邻在h2后面的p
列组合器	col || td	匹配col作用域内的td （ Working Draft）

4.伪选择器

4.1 伪类

说明：伪类的操作对象是文档树中已有的元素 单冒号

 状态:
     :link
     :visited
     :hover
     :active
     :focus
结构化:
     :not  一个否定伪类，用于匹配不符合参数选择器的元素
     :first-child 匹配元素的第一个子元素
     :last-child 匹配元素的最后一个子元素
     :first-of-type 匹配属于其父元素的首个特定类型的子元素的每个元素
     :last-of-type 匹配元素的最后一个子元素
     :nth-child 根据元素的位置匹配一个或者多个元素，它接受一个 an+b 形式的参数，2n偶数(even)，2n+1基数(odd)
     :nth-last-child  :nth-last-child 与:nth-child 相似，不同之处在于它是从最后一个子元素开始计数的
     :nth-of-type  :nth-of-type 与 nth-child 相似，不同之处在于它是只匹配特定类型的元素
     :nth-last-of-type :nth-last-of-type 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的
     :only-child  当元素是其父元素中唯一一个子元素时，:only-child 匹配该元素
     :only-of-type  当元素是其父元素中唯一一个特定类型的子元素时，:only-child 匹配该元素
     :target  当 URL 带有锚名称，指向文档内某个具体的元素时，:target 匹配该元素                                    
...表单等，需要了解请看文末参考文档            

4.2 伪元素

说明：伪元素则创建了一个文档数外的元素 双冒号（单冒号）部分不兼容一定要使用双引号

单双冒号：
     ::before/:before
     ::after/:after
     ::first-letter/:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中。
     ::first-line/:first-line  匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
仅双冒号：
     ::selection 匹配用户被用户选中或者处于高亮状态的部分
     ::placeholder 匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效。该伪元素不是 CSS 的标准
     ::backdrop (处于试验阶段) 用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色                                           

注意

• 伪类选择器前加空格：选择的是元素的后代子元素；
• 伪类选择器前不加空格：选择的是元素本身；
• 例如

// 选择的是元素的后代子元素li，结果是第一个li和第一个span为orange
ul :first-of-type {
        color: orange;
}
// 选择的是元素本身ul,结果是全部为orange
ul:first-of-type {
        color: orange;
}

<ul>
        <li>这里的文本是橙色的</li>
        <li>一些文本 <span>这里的文本是橙色的</span></li>
        <li>一些文本</li>
</ul>

第二部分：CSS权重优先级

这种方法是存在一定问题的

选择器	例子	权重
ID选择器	#example	100
类选择器	.example	10
属性选择器	[type=‘redio’]	10
伪类选择器	:hover，:active…	10
标签选择器	h1 , nav …	1
伪元素选择器	:before,:after,::before,::after	1

权重优先级应该这么去算

代号	名称	权重
A	内联样式	1, 0, 0, 0
B	ID的数量	0, 1, 0, 0
C	class、属性选择器、伪类等，不包括伪元素	0, 0, 1, 0
D	伪元素及标签的数量	0, 0, 0, 1

• A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。
• B：计算该选择器中ID的数量。如果有则B=1，没有B=0（例如，#header 这样的选择器，计算为0, 1, 0, 0）。
• C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。（例如， .logo[id=‘site-logo’] 这样的选择器，计算为0, 0, 2, 0）（后面将进一解释为什么会是0,0,2,0）。
• D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）

根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

注意前提: 这种方式比较的前提是最后是要落在同一个tag上面的. 上面的例子 .count 和 em 应该是同一个tag, 如果落脚点的tag不一样的话, 那就是就近原则, 而不能够再用权重值的比较了!

总结一下：! Importent > 内联样式 > ID 选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 伪元素选择器 ｜ 标签选择器

值得注意：

• 通配选择符(*)，关系选择符(+ ,>,~,’’,|| )，否定位类(:not()) 对优先级没有影响（但是在:not() 内部声明对选择器会影响优先级）。
• 在同一css文件中，权重相同，以后面出现的css样式为准
• 在不同css文件中，权重相同，以更接近元素的css样式为准

使用important 法则：

• 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
• 永远不要在你的插件中使用 !important
• 永远不要在全站范围的 CSS 代码中使用 !important

参考文档：
1、https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
2、伪选择器 http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/
3、css优先级权重 https://justcode.ikeepstudying.com/2016/07/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3css%E6%9D%83%E9%87%8D%E4%BC%98%E5%85%88%E7%BA%A7/