CSS选择器4

HTML

<div class="first">
  <p>
    因为我是第一个孩子，所以我的颜色变了
  </p>
  <div>
    <p>
      因为我是div的第一个孩子，所以我的颜色也变了
    </p>
    <p>
      因为我不是div的第一个孩子，所以我的颜色不变
    </p>
  </div>
  <p>
    因为我不是.first的第一个孩子，所以我的颜色也不变
  </p>
  <section>
    <p>
      因为我是section的第一个孩子，所以我的颜色也变了
    </p>
  </section>
</div>
<div class="second">
  <p>
  我(first-letter)是测试的第一行，所以我的颜色应该会变化的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的
  </p>
</div>
<div class="third">
  <p>这里在p标签前面添加Before这个单词，然后后面添加After这个单词</p>
</div>
<div class="fourth">
  <p>
    因为我不是。fourth的最后个孩子，所以我的颜色不会变
  </p>
  <div>
    <p>
      因为我是div的第一个孩子，所以我的颜色不会变
    </p>
    <p>
      因为我是div的最后一个孩子，所以我的颜色会变
    </p>
  </div>
  <p>
    因为我不是.fourth的最后一个孩子，所以我的颜色不会变
  </p>
  <section>
    <p>
      因为我是section的最后一个孩子，所以我的颜色也变了
    </p>
  </section>
</div>
<div class="fifth">
  <p>
    因为我是div的第一个孩子，所以我的颜色不会变
  </p>
  <p>
    因为我是div的第二个孩子，所以我的颜色会变p:nth-child(2)
  </p>
  <p>
    因为我是div的第三个孩子，所以我的颜色不会变
  </p>
</div>
<div class="sixth">
  <p>
    因为我是div的倒数第四个孩子，所以我的颜色不会变
  </p>
  <p>
    因为我是div的倒数第三个孩子，并且是p标签，所以我的颜色会变p:nth-last-child(3)
  </p>
  <div>
    虽然我是div的倒数第二个孩子，但是我不是p标签，所以颜色不变p:nth-last-child(2)
  </div>
  <p>
    因为我是div的倒数第一个孩子，所以我的颜色不会变
  </p>
</div>
<div class="seventh">
  <p>
    虽然我是p标签的同级兄弟，但我的顺序是1，所以颜色不变
  </p>
  <p>
    虽然我是p标签的同级兄弟，但我的顺序是2，所以颜色不变
  </p>
  <div>
    虽然我是p标签的同级兄弟，但我的类型和p标签不一样，所以颜色不变
  </div>
  <p>
    因为我是同类型p的同级兄弟第三个，所以我的颜色会变p:nth-of-type(3)
  </p>
</div>
<p>后面的nth-last-of-type(n)/first-of-type/last-of-tye都是类似的</p>
<div class="eighth">
  <div>
    <p>
    我的父元素div只包含我这个子元素p，所以我的颜色会变 p:only-child
    </p>
  </div>
  <div>
    <p>
    我的父元素div包含两个子元素p，所以我的颜色不会变
    </p>
    <p>
    我的父元素div包含两个子元素p，所以我的颜色不会变
    </p>
  </div>
</div>
<div class="nineth">
  <div>
      <p>
      我的父元素div包含两个同类型的子元素p，所以我的颜色不会变
      </p>
      <p>
      我的父元素div包含两个同类型的子元素p，所以我的颜色不会变
      </p>
    </div>
    <div>
      <p>
      我的父元素div只包含一个同类型的子元素p，所以我的颜色会变
      </p>
      <section>
...

CSS

:root
{
  background: rgba(10, 10, 10, 0.2);
}
.first p:second-child{
  color: blue;
}
.second p:first-line{
  color: #0F0;
}
.second p:first-letter{
  color: #00F;
}
.third p:before{
  content: 'Before';
  color: #888;
}
.third p:after{
  content: 'After';
  color: #666;
}
.fourth p:last-child{
  color: #F00;
}
.fifth p:nth-child(2){
  color: #FF90AA;
}
.sixth p:nth-last-child(2){
  color: #FF0011;
}
.sixth p:nth-last-child(3){
  color: #FF0011;
}
.seventh p:nth-of-type(3){
  color: #11AA11;
}
.eighth p:only-child{
  color: #00EEAA
}
.nineth p:only-of-type{
  color: #A010AA
}
.tenth div:empty{
  border: 1px solid #000;
  height: 20px;
  width: 100%
}