是否使用僞元素：first-child或last-child

我首先說我不知道如何通過瀏覽器將CSS規則分配給DOM元素，以便我的問題更多地圍繞它，但是我得到了在這種特殊的情況下，我鑽進知道這一點，所以我用它正式我的好奇心：是否使用僞元素：first-child或last-child

我有一個HTML網頁摘要：

<section> 
<div>I'd like to be blue</div> 
<div style="color:green">I am quite <p style="font-weight: bold">self confident</p> about my styles</div> 
<p>I'd like to be biig</p> 
</section>

的div小號嘗試的文字內容描述我的要求：第一個div必須是藍色的，第二個我不在乎，因爲我可能會使用繼承的屬性，或者我會設置throu嗯js或什麼的。的p應該大膽，

所以我想將樣式分配要做到這一點，我做這樣的事情：

section div { 
color: blue; 
} 

section p { 
font-weight: bold; 
}

而這顯然是按預期工作。但是，CSS具有很好的功能來定位更具體的元素。所以，我能做的，做同樣的事情：

section > div:first-child { 
color: blue; 
} 

section > p { 
font-weight: bold; 
}

這將影響僅是該部分的直接孩子，只有一組的第一個div元素，這樣我也會有同樣的結果，但更具體地選擇元素。我不知道這是否有助於瀏覽器分配CSS元素的規則。我認爲瀏覽器在某個層次上檢查每個DOM元素的css規則，如果它發現匹配（一個css類實際上是以它爲目標的），它會檢查衝突並根據需要執行覆蓋。

將排除該集合中的元素，通過更具體地定位它們來幫助瀏覽器分配樣式（提高性能或降低）？

如果它增加了，它是有意義的還是很少讓每個人都忽略它？

如果它減少了多少，爲什麼？

感謝您的任何建議。

來源

2016-03-09 Morrisda

CSS選擇器的全部用途是針對特定元素。更具體的選擇器覆蓋其他規則與較不特定的選擇器。「第一個孩子」選擇器是另一個縮小目標元素組的選擇器。 –

我明白這一點，但它會影響瀏覽器的性能（當它將風格分配給dom元素時）？ @JacobGray – Morrisda

這篇文章（和它的底部鏈接的演示文稿）可能會讓你感興趣，儘管它已經有幾年的歷史了http://calendar.perfplanet.com/2011/css-selector-performance-has-改變爲更好/ –

根據this article from Mozilla Development Network，選擇器越具體越好。所以如果你不打擾有多少div變成藍色，那麼一般的選擇器部分div更好。選擇器鏈越長，瀏覽器就越難找到該元素，因爲它需要匹配更多的東西。在這種情況下，性能最高的選項實際上是將一個名爲例如.blue的類分配給您想要藍色的div。

element>element（直接子）選擇器是more performant比在沙箱中的element element（下降）選擇器，但如果你想在另一個點覆蓋它，可能會迫使你寫一個更長的選擇器鏈。因爲像下面這樣的僞元素：第一個孩子是性能最差的選擇器，並且你更進一步地（或者說），所以在你的例子中（至少簡單地說），整體性能可能會下降一點（毫無意義）有一個更長的選擇器鏈。

如果你真的問過我在哪個項目中使用了多於6行的css，我鼓勵你使用第一個例子，因爲它更容易被覆蓋和重用。

來源

2016-03-09 21:16:39

是否使用僞元素：first-child或last-child

回答

相關問題