分組多個CSS選擇器

將多個CSS選擇器分組以提高加載速度

效率是成功網站的重要因素。 該網站在網上使用圖片的方式應該很高效。 這將有助於確保網站對訪問者表現良好,並在其設備上快速加載 。 效率也應該成為整個流程的一部分,幫助您按時按預算保持網站的進度。

最終,效率在網站創建和長期成功的所有方面發揮作用,包括為該網站的CSS表單編寫的樣式。 能夠創建更精簡,更乾淨的CSS文件是理想的,您可以通過將多個CSS選擇器分組在一起來實現。

分組選擇器

CSS選擇器分組時,可以將相同的樣式應用於多個不同的元素,而無需在樣式表中重複樣式。 不是有兩個或三個甚至更多的CSS規則,所有這些規則都做同樣的事情(例如,將某些東西的顏色設置為紅色),您可以使用單個CSS規則完成您的頁面。

這個“選擇器分組”有利於頁面的原因有很多。 首先,您的樣式表將更小並且加載速度更快。 無可否認,當涉及到緩慢加載網站時,樣式表不是其中一個主要的罪魁禍首。 CSS文件是文本文件,所以即使是非常長的CSS頁面,與未優化的圖片相比,文件尺寸也很小。 儘管如此,每一個細節都很重要,如果你可以削減一定規模的CSS並以更快的速度加載頁面,那總是一件好事。

一般來說,站點的平均負載速度高於3秒, 3到7秒是平均水平,7秒以上太慢了。 這些較低的數字意味著,要在您的網站上實現這些目標,您需要盡一切所能! 這就是為什麼您可以使用分組CSS選擇器幫助您保持網站速度的原因。

如何分組CSS選擇器

要將CSS選擇器分組在樣式表中,可以使用逗號分隔樣式中的多個分組選擇器 。 在下面的示例中,樣式會影響p和div元素:

div,p {color:#f00; }

逗號基本上是指“和”。 所以這個選擇器適用於所有的段落元素和所有的分割元素。 如果逗號缺失,則它將成為所有段落元素,而這些段落元素是分區的子元素。 這是一種非常不同的選擇器,所以這個逗號確實改變了選擇器的意義!

任何形式的選擇器都可以與其他選擇器分組。 在這個例子中,一個類選擇器被分組為一個ID選擇器:

p.red,#sub {color:#f00; }

所以這種風格適用於任何具有“red”類屬性的段落,以及具有“sub”ID屬性的任何元素(因為我們沒有指定哪種類型)。

您可以將任意數量的選擇器組合在一起,包括單個單詞和復合選擇器的選擇器。 這個例子包括四個不同的選擇器:

p,.red,#sub,div a:link {color:#f00; }

所以這個CSS規則將適用於以下內容:

最後一個選擇器是一個複合選擇器。 您可以看到它很容易與此CSS規則中的其他選擇器結合使用。 通過這個規則,我們在這4個選擇器上設置#f00(紅色)的顏色,這比編寫4個單獨的選擇器來獲得相同的結果更可取。

分組選擇器的另一個好處是,如果您需要進行更改,您可以編輯一個CSS規則而不是多個CSS規則。 這意味著這種方法可以節省您在將來維護網站時的頁面重量和時間。

任何選擇器都可以分組

從上面的示例中可以看到,任何有效的選擇器都可以放在一個組中,並且文檔中與所有分組元素匹配的所有元素都將具有基於該樣式屬性的相同樣式。

有些人更願意在分開的行上列出分組元素,以便在代碼中清晰易讀。 網站上的外觀和加載速度保持不變。 例如,您可以在一行代碼中將由逗號分隔的樣式組合為一個樣式屬性:

th,td,p.red,div#firstred {color:red; }

或者您可以在單行上列出樣式以清晰起見:


TD,
p.red,
DIV#firstred
{
紅色;
}

無論您使用哪種方法對多個CSS選擇器進行分組,都可以加快網站的運行速度,並使其更易於長期管理樣式。

Jennifer Krynin的原創文章。 由Jeremy Girard於5/8/17編輯。