CSS - 选择除第一个之外的所有子项

Question

我有以下内容:

<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> ，除了第一个，对于每个元素 .chapter和.section ？例如，我想选择 <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> ，等等。

谢谢。

Answer 1

您应该将 :first-of-type 与 :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>