最後一個孩子/第一個孩子是如何工作的？

我有問題如何工作第一個孩子和最後一個孩子與元素和類？最後一個孩子/第一個孩子是如何工作的？

而對於它，我有一些問題：

爲什麼這個規則不工作：

p.test1:first-child{ 
    color: green; 
}

那麼如何改變與類第一個元素的顏色test1？
爲什麼這個規則，如果工作類似於例子1：
```
p.test1:last-child{ 
    color: white; 
} 
```

來源

2013-05-09 WooCaSh

你能想到的CSS選擇器的優先級相同的：'.test'和'：第一child'是兩地分居，同一個「級別」選擇，都適用於'p'「平行地」，所以'p.test：first-child'意思是「'p」，它屬於'test'類，也是第一個孩子。 – Passerby 2013-05-09 03:18:07

@Passerby謝謝。很好，簡短的答案。但是，在我的情況下，如何選擇帶有'test1'類的第一個元素？ – WooCaSh 2013-05-09 03:21:52

在你的具體情況下，這可以工作：http://jsfiddle.net/Ac9t6/12/（IE> = 9）。但它有一定的侷限性。 – Passerby 2013-05-09 03:44:59

第一個孩子的CSS僞類代表任何元素，它的父代的第一個子元素是。

最後一個孩子的CSS僞類表示任何元素，它的父元素的最後一個子元素是。

參考文獻：

http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child

1-在你的榜樣p.test1不是其父的第一個子元素，所以選擇不選擇任何元素。

2- .test1：第n的式（4）更新，代替4，而不是1，不安靜的溶液中，參考號：http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

3-因爲它是最後一個子元素其家長。

請注意：在您的示例中的父項是body標記。

實例以供將來參考的問題：

<p>test</p> 
<p>test</p> 
<p>test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p>

來源

2013-05-09 03:09:44 Arbel

一切都很好，但'.test1：n型（1）'不工作。只有在我寫作時才工作。test1：第n個類型（4）'其中第4個元素是第一個類'test1' ...這很奇怪。 – WooCaSh 2013-05-09 03:19:18

'.test1：第n類型（1）'不會做你認爲它做的事。請參閱http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107獲取解釋。 – BoltClock 2013-05-09 03:53:55

@BoltClock謝謝！ – Arbel 2013-05-09 04:02:04

第一胎/後的孩子是相對於父元素。在你的例子中沒有p.test-element是它的父元素（JsFiddle容器）的第一個子元素。相反，第一個孩子是一個普通的p元素。如果您在第一個p元素上設置.test類，它將變爲綠色。

來源

2013-05-09 03:07:40 Whistletoe

最後一個孩子/第一個孩子是如何工作的？

回答

相關問題