CSS选择器易混点

后代选择器与子元素选择器

1、在<style>标签里，后代选择器用空格连接；

如：A B，表示B是A的后代结点（B是A的子节点，或者A的子节点的子节点，可以一直往下找并匹配，中间可以有其他元素）

2、子元素选择器用>连接；

如A>B，表示B是A的子元素，A必须是B的父元素才能匹配上。

如果是在class里面的空格，如下所示，那么表示这个div是同时具有类选择器b和类选择器c的特性的。在style里，如下都可以选中该div，但是由于选择器的权重计算，最终的背景颜色为green。

<style>
    .b.c {
         background: green;
    }
    .c {
         background: red;
    }
    .b {
         background: bisque;
    }
</style>
<div class="b c">hello</div>

相邻兄弟选择器与兄弟选择器

A + B：A和B有相同的父节点，且B为A后面紧接着的兄弟节点；

A ~ B：A和B有相同的父节点，且B为A后面的兄弟节点；

A,B：表示A和B都拥有后面的样式。

nth-of-type(k)和nth-child(k)

nth-of-type(k):是当前元素的兄弟元素的第k个，这些元素计算个数必须要类型相同，不然不计数，nth-child(k)是当前元素兄弟元素的第k个，计数时要将类型不同的元素也计算进去。

个人理解：nth-of-type是先把符合匹配条件的类型相同的元素取出来，然后匹配第k个；nth-child是把匹配类型的父级元素的所有子节点取出来进行计数编号，如果有第k个子节点的满足了匹配类型，那么才能匹配上。