CSS选择器：复合类与后代类选择器优先级及术语咨询

1. 复合类选择器与后代类选择器的优先级规则 #

CSS优先级核心看选择器的权重值，权重分为四个层级（从高到低）：行内样式(1,0,0,0) > ID选择器(0,1,0,0) > 类/属性/伪类选择器(0,0,1,0) > 元素/伪元素选择器(0,0,0,1)。

• .row.second（无空格串联）属于复合选择器，由两个类选择器组成，权重为0,0,2,0
• .row .second（空格分隔）属于后代选择器，由两个类选择器通过后代组合器连接，权重同样为0,0,2,0

若两个选择器直接选中同一个元素，权重相同时后定义的选择器会覆盖先定义的；但如果选择器作用的元素不同，需注意「直接选中」与「继承样式」的优先级：直接选中元素的样式，优先级远高于从父元素继承的样式，和父元素选择器的权重无关。

2. 两种选择器的官方术语 #

• .row.second：复合选择器（Compound Selector），由多个无组合器的简单选择器直接串联，匹配同时满足所有简单选择器条件的单个元素。
• .row .second：后代选择器（Descendant Selector），通过后代组合器（空格）连接两个选择器，匹配前一个选择器选中元素的所有后代元素中符合后一个选择器的元素。

3. 示例中‘Stuff 2b’显示紫色的原因 #

.row.second选择的是同时拥有row和second类的div元素，它设置的是这个div的文字颜色，‘Stuff 2b’所在的section元素会继承这个橙色；但.row .second是直接选中row类元素后代中拥有second类的section元素，给这个section直接设置了紫色。

由于「直接选中元素的样式」优先级远高于「继承自父元素的样式」，哪怕父元素的选择器权重和直接选中的选择器权重相同，直接设置的紫色也会覆盖继承的橙色，所以‘Stuff 2b’显示紫色。

内容的提问来源于stack exchange，提问作者Zack