一、基础知识点

1. 选择器类别

2. 基础选择器优先级（权重）

3. 优先级计算规则

两个选择器给同一元素设置相同的属性，分别将两个选择器权重相加，属性生效满足以下规则。
（1）权重大的选择器生效
（2）权重相同，后设置的选择器生效

值得注意的是：所有设置的选择器都会生效，只是优先级高的会覆盖掉优先级低的。

二、重难点

1.邻近兄弟选择器A+B，顾名思义就是选择紧靠在A元素后面的B元素

/* css */
.div+.div{
  background-color: teal;
}
<!-- html -->
<div class="div">
  div1
</div>
<div class="div">
  div2
</div>
<div>
  div3
</div>
<div class="div">
  div4
</div>

以上述代码为例，显示效果如下图，可以看到只有紧靠在div1后面的div2添加了背景色

将上述例子中邻近兄弟选择器+换成兄弟选择器~，显示效果如下，div1后面的div2和div4都添加了背景色

2. 直接子代选择器A>B，选择A元素的直接子元素B

/* css */
.div > div {
  color: teal;
}
.indiv {
  color: thistle;
}
<!-- html -->
<div class="div">
  <div>
    div1
    <div class="indiv">div11</div>
  </div>
  <div>
    div2
  </div>
</div>

以上述代码为例，显示效果如下，显然.div > div选择器的权重>.indiv，但是却没有在div11中生效，说明其没有做到到div11上。

将上述例子中直接子代选择器A>B换成后代选择器A B，显示效果如下，div11添加了一样颜色

3. 关系选择器（邻近兄弟选择器，兄弟选择器，直接子代选择器，后代选择器）的权重为其用到的基础选择器权重之和，与其是哪一种关系选择器无关。