2016-03-09 74 views
0

我首先說我不知道​​如何通過瀏覽器將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類實際上是以它爲目標的),它會檢查衝突並根據需要執行覆蓋。

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

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

如果它減少了多少,爲什麼?

感謝您的任何建議。

+0

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

+0

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

+0

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

回答

2

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

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

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