1、后代选择器：
选择器之间用空格隔开
2、子代选择器
父子选择器之间，用 > 隔开(选择到的只能是儿子)
3、毗邻元素选择器
只能匹配到挨着的后一个元素，用 + 隔开
4、兄弟元素选择器（同级元素选择器）
匹配所有的兄弟元素，用 ~ 隔开

<style>
     .content p + p {
        color: blue; // 只有大胡子变蓝，毗邻元素被span给截断了。如果没有span，则是大胡子、夏蝉变蓝
     }
     content p ~ p {
        color: red; // 第一个p元素后面的所有p元素都变成红色，span对其没有影响，第一个p元素没有变红是因为没有其他的兄弟元素的兄弟元素是他（从前往后匹配）
     }
</style>
<div class="content">
     <p>风声</p>
     <p>大胡子</p>
     <span>朝歌</span>
     <p>青云</p>
     <p>夏蝉</p>
</div>

css选择器优先级和权重的计算

css权重

权值等级划分， 一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

第三等级：代表 class | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；