推薦的CSS樣式指南

讓我們有這樣的html;推薦的CSS樣式指南

<div class="mainElement"> 
    <div class="subElement1">...</div> 
    <div class="subElement2">...</div> 
    <div class="subElement3">...</div> 
</div>

所以，如果想要風格，'subElement1'哪一個更標準或更快。

.mainElement > .subElement1{ 
    /*some CSS here..*/ 
} 

.mainElement .subElement1{ 
    /*some CSS here..*/ 
} 

.mainElement > div:first-child{ 
    /*some CSS here..*/ 
}

來源

2016-06-30 Erdeniz Korkmaz

第一個將是最快的，因爲它是最具體的......「標準」是意見......它將取決於具體情況。 –

如果你想重用subElement1，我會用第一個去。最後的選項將使得不需要使用subElement1。 – Handsken

從你的人，最好是：

.mainElement > .subElement1{ 
    /*some CSS here..*/ 
}

，因爲它從父類直接針對兒童。

但是，如果你真的想表現，想直接目標類：

.subElement1{ 
    /*some CSS here..*/ 
}

或者，如果你想更快速的代碼，使用的ID：

#subElement1{ 
    /*some CSS here..*/ 
}

標識一般爲瀏覽器快一些目標，因爲它們應該只用於每個元素一次。

瀏覽器從右向左閱讀CSS，因此除非真的需要它，否則添加父類/ id只會減慢代碼速度。

來源

2016-06-30 06:42:26

謝謝。我不知道有什麼權利留下瀏覽器的東西。我想我現在要使用第一個選項。 –

爲什麼不只是.subelement1？

如果沒有理由嵌套你的選擇器，最好不要將它們嵌套在一起。

但是，對於你的問題，這實際上取決於你正在嘗試做什麼你發佈的選項都做不同的事情。

第一種是快速和具體的，但選擇的.mainElement

唯一的直接後裔的第二選項選擇是內.mainElement所有.subelement1類，其現在只有一個元素，但你可以保持嵌套它們彼此的內他們都會得到相同的造型，而不僅僅是直接的後代。

至於最後一個是最特殊的，可能讓你陷入困境找到了一個div的.mainElement裏面是一個first-child這可能會導致麻煩，如果你要改變，在所有的標記，並說使用span而不是div也只有第一個孩子總能得到那個造型，不管你給了它什麼課。

來源

2016-06-30 06:45:28 Enjayy

.subElement就足夠了，你不應該首先訪問父類，導致它影響到文件大小（儘管非常小的大小），並使css加載文件變慢。希望這個鏈接幫助你Writing efficient CSS

來源

2016-06-30 06:52:32

推薦的CSS樣式指南

回答

相關問題