我首先說我不知道如何通過瀏覽器將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類實際上是以它爲目標的),它會檢查衝突並根據需要執行覆蓋。
將排除該集合中的元素,通過更具體地定位它們來幫助瀏覽器分配樣式(提高性能或降低)?
如果它增加了,它是有意義的還是很少讓每個人都忽略它?
如果它減少了多少,爲什麼?
感謝您的任何建議。
CSS選擇器的全部用途是針對特定元素。更具體的選擇器覆蓋其他規則與較不特定的選擇器。 「第一個孩子」選擇器是另一個縮小目標元素組的選擇器。 –
我明白這一點,但它會影響瀏覽器的性能(當它將風格分配給dom元素時)? @JacobGray – Morrisda
這篇文章(和它的底部鏈接的演示文稿)可能會讓你感興趣,儘管它已經有幾年的歷史了http://calendar.perfplanet.com/2011/css-selector-performance-has-改變爲更好/ –