通用选择器： *  将匹配文档的所有元素 元素选择器：input 匹配任何 input 元素。 类选择器： .index  匹配任何  class  属性中含有 "index" 类的元素。 ID 选择器： #toc  匹配 ID 为 "toc" 的元素。 属性选择器： [autoplay]  选择所有具有  autoplay  属性的元素（不论这个属性的值是什么）

选择器列表： div, span  会同时匹配 <span> 元素和 <div> 元素。 后代组合器： div span  匹配所有位于任意 <div> 元素之内的 <span> 元素。 直接子代组合器： ul > li  匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。 一般兄弟组合器： p ~ span  匹配同一父元素下，<p> 元素后的所有 <span> 元素 紧邻兄弟组合器： h2 + p  会匹配_紧_邻在 h2 元素后的第一个 <p> 元素。

伪类： a:visited  匹配所有曾被访问过的 <a> 元素。 :nth-child() :hover 伪元素： p::first-line  匹配所有 <p> 元素的第一行。 ::after 会创建一个伪元素，作为所选元素的最后一个子元素 ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素

---

当元素没有声明样式规则时候，会从最近的父元素继承样式

• 一般和字体相关的属性都可以继承，比如颜色、字体大小等
• 不可继承属性也可以使用 inherit 显式一个属性继承父类元素属性

层叠规则是为了解决多个样式声明规则同时作用一个元素时产生冲突的问题。

• 首先是是样式表的来源，开发者自己写的样式表的大于浏览器默认的代理样式表

• 其次是选择器的优先级：一般是内联 > id > class、属性、伪类 > 标签类型、伪元素。当一个元素被作用于多个选择器时，会采取权重计算的方式，一般用向量表来表示第一位如果是内联样式就是 1，第二位是 id 选择器出现次数，第三位是 class、属性、伪类出现的总次数，第四位是标签和伪元素出现总次数。通过从第一位到第四位依次进行比较，较大者优先，相等则比较下一位

  • 还有一个！important 可以设置权重为无穷大，提升优先级

• 如果上面的比较规则结果都相等，就按照源码出现位置后面声明的覆盖前面声明的样式