一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
学习笔记
基本选择器
通用选择器：*
匹配所有元素
元素选择器：标签
p，匹配所有p元素
类选择器：.classname
匹配所有具有特定class属性的元素
id选择器：#idname
匹配具有特定id名称的元素，结果唯一
属性选择器：[attr]
匹配所有具有特定属性的元素，
方括号里可以是关于attr的表达式，表示匹配attr满足某种条件的元素。
[attr=value] 选择属性attr为特定value的元素
[attr~=value] 选择attr属性值（以空格隔出多个值中）包含value的元素，属性含有多个值，其中一个是value（比如attr为class时）
[attr|=value] 选择attr属性的值以value或value-开头的元素。主要用于lang属性，比如"en"、"en-us"、"en-gb"等等
[attr^=value] 选择attr属性的值以value开头（包括value）的元素
[attr$=value] 选择attr属性的值以value结尾（包括value）的元素
[attr*=value]选择attr属性的值中包含字符串value的元素
分组选择器
选择器列表：a,b：匹配满足a和b条件的所有元素。a和b是某种选择器
组合器
后代选择器：空格
空格。比如：div span，选择所有位于div元素内的span元素。选择的所有子元素。
直接子代组合器：>
a>b。比如ul >li，选择所有在ul内的li元素。
一般兄弟组合器:~
a～b。比如p～span，选择p后的所有span元素，p和span处于同一级
紧邻兄弟组合器：+
a+b。比如h2+p，选择所有跟在h2后的p元素。
列组合器：||(表格内选择)
a||b，选择属于某个表格行的节点。比如col || td，选择所有col域内的td元素
a～b包括a+b,都是向后选择，前面的不包括。
伪选择器
伪类
“：”，按照未被包含在文档树中的状态信息来选择元素/匹配处于确定状态的一个或多个元素。
最终结果是元素。
比如：a:visited：所有未曾被访问的a元素
修饰元素，前面要加选择器
伪元素
“::”，表示无法用html语义表达的实体/匹配处于相关的确定位置的一个或多个元素
根据位置关系匹配，可能像新增html元素
p::first-line：所有p元素的第一行
利用伪元素为对话框增加箭头的例子：cssarrowplease.com/
伪元素与伪类的区别
每个选择器最多只能使用一个伪元素，每个选择器可以使用多个伪类
选择器权重计算
选择器权重越高，优先级越高。
同一个元素上规则，优先级高的规则生效。如果优先级相同，后面的规则覆盖前面的规则。
在文档里只剩三种黄色背景的优先级。
例外规则
- !important
此声明将覆盖任何其他声明。!important 与优先级无关，但它与最终的结果直接相关
!important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important
- 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important
- 永远不要在你的插件中使用
!important
- 永远不要在全站范围的 CSS 代码中使用
!important
使用!important的情况
- 内联样式和!important都被认为是非常不好的做法，但是有时你可以在CSS文件里用!important去覆盖内联样式。
- 许多JavaScript框架和库都添加了内联样式。 有时候可以用
!important与优先级高的选择器一起使用，以重写覆盖这些内联样式。
.myTable td { height: 50px !important; }
- is:()和:not()
会被当成普通选择器而不是伪类计算
前一个选择器：（0，0，10，2）；
后一个选择器：:not不计算，计算的是.outer（0，0，10，2）
计算的例子
注意，低位不会进位，实际四个位，是用数组表示，[1,0,0,11],类似这样保存。
从最左边高位开始比较，某个位存在大小关系，就不再向后比。
上面这张sheet可以保存下来，好好看看。
参考资料
msdn选择器： developer.mozilla.org/zh-CN/docs/…
伪类和伪元素：伪类和伪元素 - 学习 Web 开发 | MDN
w3c官方文档：www.w3.org/TR/selector… 这里有对所有伪类进行分类与举例说明
