相邻兄弟选择符与:first-child实例页面

展示

代码

• HTML：

  <div class="cs-g1">
      <h4>使用:first-child实现</h4>
      <p class="cs-li">列表内容1</p>
      <p class="cs-li">列表内容2</p>
      <p class="cs-li">列表内容3</p>
  </div>
  <div class="cs-g2">
      <h4>使用相邻兄弟选择符实现</h4>
      <p class="cs-li">列表内容1</p>
      <p class="cs-li">列表内容2</p>
      <p class="cs-li">列表内容3</p>
  </div>

• CSS：

  .cs-g1 .cs-li:not(:first-child) {
      color: skyblue;
  }
  .cs-g2 .cs-li + .cs-li {
      color: skyblue;
  }