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>

Answer 2

使用:not(:first-child)

＆＃13;

＆＃13;

.chapter p:not(:first-child) {
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种方法，作为推动完整性的一部分，perpaps：

＆＃13;

＆＃13;

.chapter p:first-child ~ p {
  color: red;
}

.chapter {
  border: 1px solid #000;
}

.section {
  border-top: 1px solid #999;
  margin-left: 2em;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• General-sibling (~) combinator ^{compatibility} 。

Answer 4

您可以使用nth-child

<style>
	.chapter p:nth-child(2) {
		color: red;
	}
	.section p:nth-child(2) {
		color: blue
	}
</style>

<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>

Answer 5

您可以为您的任务使用元素+元素选择器，这是示例。

.chapter p + p,
.section p + p {  };

它将在第一个p标签后选择所有下一个元素。