CSS第一胎和最後一個孩子不相同的元素

上使用時，我只注意到CSS :first-child和:last-child相同的元素上使用時不工作工作。只有一個被使用。我想知道爲什麼，如果有任何解決方法，在CSS中？這對我來說似乎是CSS bug - 第一個元素也可以是最後一個元素。CSS第一胎和最後一個孩子不相同的元素

我無法找到關於這一主題在谷歌任何東西。每個教程都假定至少有2個元素。

我在尋找類似：「第一個孩子也是最後一個孩子」選擇。它存在嗎？

來源

2012-08-23 Atadj

我想知道爲什麼，如果有任何解決方法，在CSS中？這對我來說似乎是CSS bug - 第一個元素也可以是最後一個元素。

這不是一個錯誤。這是級聯是如何工作的：如果一個元素是雙方的第一個孩子，最後孩子，那麼如果你在單獨規則有:first-child和:last-child，他們都匹配相同的元素，那麼在後來的聲明或更具體的規則很少會重寫另一個。

你可以找到的這種行爲here一個例子，與border-radius速記屬性，而且包括使用代替簡寫組件屬性，以及指定使用完全以下選擇的一個單獨的規則解決辦法...

我正在尋找類似「第一個孩子也是最後一個孩子」的選擇器。它存在嗎？

從字面上看，你會鏈中的僞類是這樣，這工作得很好：

:first-child:last-child

但是存在一個特殊的僞類，它的作用是相同的：

:only-child

這兩個選擇器之間的主要區別（在實際上，只有差）是特異性：第一個是更具體的，因爲它包含一個額外的僞類。即使在瀏覽器支持上也沒有區別，因爲:last-child和:only-child都支持每個瀏覽器完全相同的版本。

來源

2012-08-23 14:22:45 BoltClock

太好了！感謝您的快速反應！ '：獨生子'存在更好 - 它增加了更多的靈活性。 – Atadj

請確保您支持IE9 +，因爲我認爲這是IE支持的第一個版本：only-child。 – AlexM

@AlexM：正確。這也是第一個支持'：last-child'的版本。不幸的是，目前還沒有一種方法可以針對在較早版本中使用純CSS的唯一孩子。你必須操縱HTML或使用腳本。 – BoltClock

我意識到我已經大量遲到了，但你也可以使用CSS的:first-of-type和:last-of-type。例如：

<blockquote> 
    <p>Some text you want to quote</p> 
</blockquote>

這個CSS將引號添加到段落：

blockquote{ 
    quotes: "「" "」" "‘" "’"; 
} 

blockquote p:first-of-type:before{ 
    content:open-quote; 
} 

blockquote p:last-of-type:after{ 
    content:close-quote; 
}

來源

2016-03-26 01:23:35 fstorr

CSS第一胎和最後一個孩子不相同的元素

回答

相關問題