CSS - 選擇除第一個

所有孩子的我有以下幾點：CSS - 選擇除第一個

<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，是可以選擇的所有元素，除了第一個，每個元素.chapter和.section？例如，我想選擇chapter 1, paragraph 2,chapter 1, section 1, paragraph 2,chapter 2, section 1, paragraph 2，chapter 2, section 2, paragraph 2等。

謝謝。

來源

2014-11-22 Rui Afonso Pereira

你碰巧錯過了'

第2章第1節第2段

'？ – 2014-11-22 22:53:52

是的，我忘了將它包含在我的例子列表中。謝謝你指出，@ chipChocolate.py – 2014-11-22 23:10:12

然後我的回答是正確的，我刪除了它因爲你忘了提及，大聲笑 – 2014-11-22 23:18:23

您應該使用: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>

來源

2014-11-22 22:57:19

是的，這個技巧。謝謝@Gaby aka G. Petrioli！ – 2014-11-22 23:18:19

使用:not(:first-child)

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

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

來源

2014-11-22 22:52:01

這也解決了這個問題。謝謝！ – 2014-11-23 00:21:45

歡迎您！ – 2014-11-23 00:25:10

您可以使用第n個孩子

<style> 
 
\t .chapter p:nth-child(2) { 
 
\t \t color: red; 
 
\t } 
 
\t .section p:nth-child(2) { 
 
\t \t color: blue 
 
\t } 
 
</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>

來源

2014-11-22 22:55:16

我看不出nth-child（）是如何解決這個問題的@Reza Aria – 2014-11-22 23:30:56

您可以使用元素+元素選擇你的任務，這裏是例子。

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

它將選擇第一個p標籤後的所有下一個元素。

來源

2014-11-22 23:01:08 alphawow

一個進一步的方法中，如完美主義的的驅動裝置的一部分，perpaps：

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

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

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

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

參考文獻：

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

來源

2014-11-22 23:23:55

感謝您對此主題的其他見解。 @David Thomas即使你的建議在這段代碼中很難處理，它在我的.css文件中也不起作用。 – 2014-11-22 23:39:48

不幸的是，在你的實現和你在問題中發佈的實現之間存在一個未知的區別。 – 2014-11-22 23:40:46

您是否真的希望我嘗試從Web Inspector的屏幕截圖中調試您的HTML和CSS？真..？ – 2014-11-23 00:56:18

CSS - 選擇除第一個

回答

相關問題