CSS中選擇符的實(shí)際使用方法

這篇文章主要介紹“CSS中選擇符的實(shí)際使用方法”，在日常操作中，相信很多人在CSS中選擇符的實(shí)際使用方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS中選擇符的實(shí)際使用方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在我最早開始寫css的時(shí)候，其代碼上的高自由度就一直很令我困惑。這就是說(shuō)，同一個(gè)設(shè)計(jì)，如果讓不同的人來(lái)實(shí)現(xiàn)，最終的代碼一定是有差異的。但這存在一個(gè)問(wèn)題，如果不同的人通過(guò)不同的方法以及代碼風(fēng)格，都從外觀上實(shí)現(xiàn)了一樣的設(shè)計(jì)，將很難評(píng)價(jià)誰(shuí)做得更好。想來(lái)也是，既然都實(shí)現(xiàn)了設(shè)計(jì)，達(dá)到了目的，css這種沒(méi)有程序邏輯的代碼中，又能找出什么來(lái)說(shuō)明誰(shuí)做得更出色呢？

而如今，我認(rèn)同的觀念是，css這種描述性語(yǔ)言，仍然有著代碼上的質(zhì)量評(píng)判。評(píng)判標(biāo)準(zhǔn)就是可維護(hù)性（Maintainability）和性能（Performance），用比較通俗的話說(shuō)，好的css，要對(duì)開發(fā)者的工作友好（dev-friendly），也要對(duì)瀏覽器友好（browser-friendly）。 本文將說(shuō)明如何從css選擇符的角度來(lái)提高css代碼質(zhì)量。
關(guān)鍵選擇符與瀏覽器的樣式規(guī)則匹配原理

css選擇符的概念，在之前的css優(yōu)先級(jí)詳細(xì)解析的開頭部分也有提到，是指每一條樣式規(guī)則中，描述把樣式作用到哪些元素的部分，也即{}之前的部分。在本文，還要額外介紹一個(gè)概念：關(guān)鍵選擇符（Key selector）。關(guān)鍵選擇符就是在每一條樣式規(guī)則起始的{之前的最后一個(gè)選擇符，如下圖：

css選擇符將確定后面的屬性定義要作用到哪些元素,因此存在一個(gè)瀏覽器根據(jù)css選擇符來(lái)應(yīng)用樣式到對(duì)應(yīng)元素的匹配過(guò)程。關(guān)于瀏覽器的樣式匹配系統(tǒng)，David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下內(nèi)容：

    The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

意思是說(shuō)，瀏覽器引擎在樣式匹配時(shí)，以從右向左的順序進(jìn)行。在具體匹配某一條樣式規(guī)則時(shí)，這個(gè)從右向左的過(guò)程會(huì)一直持續(xù)，直到讀取完整個(gè)選擇符序列并完成匹配，或因某一個(gè)地方的不匹配而取消（然后轉(zhuǎn)到另一條樣式規(guī)則）。

至于為什么瀏覽器會(huì)選擇這樣的匹配順序，你可以看看Stack Overflow上的相關(guān)討論。大致上解釋一下的話，由于最右邊的關(guān)鍵選擇符直接表示了樣式定義應(yīng)作用的元素，所以從右向左的順序更利于瀏覽器在初始匹配的時(shí)候就確定有樣式定義的元素集合，并更快地在找某一個(gè)元素的樣式時(shí)避開大多數(shù)實(shí)際沒(méi)有作用到的選擇符。

更好的css選擇符，是讓瀏覽器在樣式匹配過(guò)程中減少匹配查詢次數(shù)，以更快的速度完成樣式匹配，從而優(yōu)化前端性能。這其中，也必須參考瀏覽器的對(duì)于樣式從右向左的匹配順序。
css選擇符的正確使用方式
更特定，更具體的關(guān)鍵選擇符

關(guān)鍵選擇符是瀏覽器引擎在樣式匹配時(shí)最先讀取到的部分，因此，如果你在某一條樣式規(guī)則中使用更特定、具體的選擇符，可以幫助減少瀏覽器的查找匹配次數(shù)。

比如說(shuō)下邊這樣的選擇符：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .content .note span{}  

最后一個(gè)span是關(guān)鍵選擇符，而span這個(gè)標(biāo)簽，在網(wǎng)頁(yè)中使用是非常多的。瀏覽器從span開始讀取選擇符，就可能會(huì)為因此在樣式匹配上做了一些額外工作。

如果你確定只是想為具體處于那一個(gè)位置的span元素定義樣式，更好的做法是為span命名class，比如命名為span.note_text，然后簡(jiǎn)單寫為：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .note_text{}  

使用class選擇符

class選擇符（類選擇符）是最利于性能優(yōu)化的選擇符。相對(duì)于class，ID的缺點(diǎn)是只允許定義給一個(gè)元素，無(wú)法重用。而此外，它在使用上沒(méi)有任何比class更好的地方。很多時(shí)候，你很難確定某一個(gè)元素是否是唯一的。另外，使用class來(lái)定義樣式，而保留ID給javascript，一直是一個(gè)較好的實(shí)踐。如果可以，不使用ID來(lái)定義樣式。

而相對(duì)于class，標(biāo)簽在html中的重復(fù)性要更大，因此同樣可能讓瀏覽器在樣式匹配時(shí)做更多的額外工作。如果可以，除css樣式清零（reset）外，不使用標(biāo)簽選擇符（也叫元素選擇符）。
縮短選擇符序列

繼承寫法（準(zhǔn)確地說(shuō)，這里指css關(guān)系選擇符中的包含選擇符）是css中很常用的寫法。繼承寫法的初衷是，如果有兩個(gè)元素，都是同樣的標(biāo)簽或有相同的class命名，加入父元素的選擇符組成選擇符序列，就可以避免在不需要的時(shí)候兩個(gè)元素的樣式互相影響。比如.confirm_layer .submit_btn就是指，class名為submit_btn，且有一個(gè)class名為confirm_layer的父元素的元素，才應(yīng)用樣式。

但是，避免元素樣式相互影響，并不代表可以隨意地使用繼承選擇符。前面提到，瀏覽器會(huì)從右向左讀取整個(gè)選擇符序列，直到讀取完畢并匹配完成，或者因不匹配而取消。因此，短的選擇符序列更有利于瀏覽器更快地完成匹配過(guò)程。相對(duì)的，冗長(zhǎng)的選擇符序列則認(rèn)為是低效的，比如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .header ul li .nav_link{}  

建議寫為：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .header .nav_link{}  

一般來(lái)說(shuō)，不超過(guò)3層的繼承層級(jí)就可以滿足實(shí)際中的開發(fā)要求。因此，應(yīng)減少不必要的繼承層級(jí)，使用更短的選擇符序列。

此外，較長(zhǎng)的選擇符序列還有一個(gè)問(wèn)題。有較長(zhǎng)選擇符的樣式規(guī)則，css優(yōu)先級(jí)的計(jì)算值也較大，因此，如果在以后需要寫新的樣式來(lái)覆蓋掉它，就需要寫更長(zhǎng)的選擇符（或者使用ID）以獲得更高的css優(yōu)先級(jí)。這對(duì)性能和代碼可讀性都是不利的。
避免鏈?zhǔn)竭x擇符

鏈?zhǔn)竭x擇符（Chaining selectors）是對(duì)單個(gè)元素同時(shí)寫了多個(gè)選擇符判定的情況。比如p.name是指class名為name，且標(biāo)簽是p的元素，才應(yīng)用樣式。這些判定組合可以是ID選擇符，標(biāo)簽選擇符，class選擇符的任意組合。

但是，鏈?zhǔn)竭x擇符是過(guò)度定義（over qualified）的，不利于重用，也不利于性能優(yōu)化。如:

CSS Code復(fù)制內(nèi)容到剪貼板

1. a#author{}  

建議寫為：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #author{}  

這里的a是不必要的。一個(gè)ID只對(duì)應(yīng)一個(gè)元素，沒(méi)有必要再?gòu)?qiáng)調(diào)這個(gè)元素的標(biāo)簽是什么（同理，class也不必）。另外有：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .content span.arrow{}  

建議寫為：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .content .arrow{}  

這里的span.arrow中的span也是不必要的。一方面，這為瀏覽器在樣式匹配時(shí)增加了一項(xiàng)額外工作：檢查class名為arrow的元素的標(biāo)簽名是不是span，也因此降低了性能。另一方面，如果去掉了這個(gè)限定，.arrow的樣式定義，就可以用在更多的元素上，也就有著更好的重用性。否則，就還得告訴別人，使用這個(gè)的時(shí)候只能用在span標(biāo)簽上。

同理，多個(gè)class的鏈?zhǔn)綄懛?，?/p>

CSS Code復(fù)制內(nèi)容到剪貼板

1. .tips.succuss{}  

建議更改命名，寫為：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .tips_succuss{}  

這樣可以幫助瀏覽器減少額外的樣式匹配工作。

此外，IE6還存在一個(gè)鏈?zhǔn)竭x擇符的問(wèn)題，多個(gè)class選擇符寫在一起時(shí)，例如.class1.class2.class3，正常情況是只有同時(shí)有這全部的class的元素，才應(yīng)用樣式。但I(xiàn)E6只認(rèn)最后一個(gè)，也就是符合.class3這個(gè)選擇符的元素，就應(yīng)用樣式。
例外情況

前面所述的選擇符的寫法的建議，只是從瀏覽器渲染性能優(yōu)化，及代碼的重用性方面分析得到的理論結(jié)果。在實(shí)際使用中，你并不需要嚴(yán)格按照這些內(nèi)容來(lái)做。例如，如果你確實(shí)是準(zhǔn)備為class名為intro的元素內(nèi)的所有a標(biāo)簽元素都加上某樣式，那么.intro a這樣的選擇符是明智的。
結(jié)語(yǔ)

關(guān)于高效的css選擇符的指南，你還可以閱讀google developer中的Use efficient CSS selectors。

如今，現(xiàn)代瀏覽器在樣式匹配上也逐漸有了更多的優(yōu)化（參考CSS Selector Performance has changed!），有些方面的內(nèi)容我們已經(jīng)不再需要再擔(dān)心了。但是，這并不意味著不需要考慮寫合理的css選擇符了。css選擇符性能優(yōu)化是依然存在的事，你的選擇符應(yīng)該更好地體現(xiàn)你的意圖，而不是隨心所欲地使用。更重要的是，以這樣一種稍細(xì)膩的，經(jīng)過(guò)思考的想法來(lái)寫css選擇符，并不是一件困難的事。只要你想，形成這樣的一種習(xí)慣，你就可以自然地在這方面做得更好，何樂(lè)而不為呢？

到此，關(guān)于“CSS中選擇符的實(shí)際使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！