編寫高效的CSS選擇符

2021-07-13 01:38:45 字數 618 閱讀 6935

css選擇符是從右到左進行匹配的

樣式系統從最右邊的選擇符開始向左匹配規則。只要當前選擇符的左邊還有其他選擇符,樣式系統就會繼續向左移動,直到找到和規則匹配的元素,或者因為不匹配而退出。

避免使用通配規則

除傳統的通配選擇符,相鄰兄弟選擇符、子選擇符、後代選擇符和屬性選擇符都歸納到「通配規則」下。他推薦僅使用id、類和標籤選擇符。

不要限定id選擇符

在頁面中指定的id只能對應乙個元素,所以沒必要新增額外的限定符。

不要限定類選擇符

不要用具體的標籤限定類選擇符,而是根據實際情況對類名進行擴充套件。

讓規則越具體越好

不要編寫長選擇符,最好建立乙個類,並把他新增到合適的元素上。

避免使用後代選擇符

通常處理後代選擇符的開銷是最高的。

避免使用標籤—子選擇符

如果有乙個基於標籤的子選擇符,那麼應該使用乙個類來關聯每個標籤元素。

質疑子選擇符的所有用途

盡可能用具體的類代替他們。

依靠繼承

了解那些屬性可以通過繼承而來,然後避免對這些屬性重複指定規則。繼承屬性列表參考:參考鏈結

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...