CSS - 选择除第一个之外的所有子项 [英] CSS - Select all childs except the first

问题描述

我有以下：

<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

使用CSS可以选择所有元素< p& / code>，除了第一个，每个元素 .chapter 和 .section 例如，我要选择< p>第1章第2段< / p> ，< p& 1，第2段< / p> ，< p>第2章第1节第2段< / p> ，< p>第2章第2节第2段< / p> 等。

Using CSS, is it possible to select all elements <p>, except the first, for each element .chapter and .section? For instance, I'd like to select <p>chapter 1, paragraph 2</p>, <p>chapter 1, section 1, paragraph 2</p>, <p>chapter 2, section 1, paragraph 2</p>, <p>chapter 2, section 2, paragraph 2</p>, and so on.

>

推荐答案

您应该使用：first-of-type c $ c>：not

You should use the :first-of-type combined with the :not

.chapter > p:not(:first-of-type),
.section > p:not(:first-of-type){
  color:#ccc
}

<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
          <p>chapter 2, section 1, paragraph 3</p>
          <p>chapter 2, section 1, paragraph 4</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

这篇关于CSS - 选择除第一个之外的所有子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！