CSS选择器1

HTML

<div class="descendant">
  <p>
    我是descendant的后代，所以我颜色会变
  </p>
  <div>
    <p>
     我是descendant的后代，所以我颜色会变
    </p>
  </div>
</div>
<div class="child">
  <p>
    我是child的子元素，所以我的颜色会变
  </p>
  <div>
    <p>
     我是child的孙孙子元素，所以我的颜色不会变
    </p>
  </div>
</div>
<div>
  <p>
    因为我是紧邻着adjacent的元素，所以我的颜色会变
  </p>
  <p class="adjacent">
    这是为了测试相邻兄弟选择器
  </p>
  <p>
    因为我是紧邻着adjacent的元素，所以我的颜色会变
  </p>
  <div>
    <p>
     这是为了测试相邻兄弟选择器
    </p>
  </div>
  <p>
    因为我不是紧邻着adjacent元素，所以我的颜色不会变
  </p>
</div>
<div>
  <p class="common">
    这是为了测试通用选择器
  </p>
  <p>
    因为我是common的同级兄弟元素，所以我的颜色会变
  </p>
  <div>
    <p>
     这是为了测试通用选择器
    </p>
  </div>
   <p>
    因为我是common的同级兄弟元素，所以我的颜色会变，这个可以区别出选择器+
  </p>
  
</div>

CSS

.descendant p{
  color: #F00;
}
.child > p{
  color: #0F0;
}

.adjacent + p{
  color: #00F;
}
.common ~ p{
  color: #F2F301;
}