您現在的位置是:電腦技術吧?>? 編程技術 ??>??選擇符有哪些,選擇符??>??正文詳情

選擇符有哪些,選擇符

朱茂實2019-11-27 09:31:49 人圍觀
簡介p是什么選擇符當我第一次開始編寫CSS時,我對代碼的高度自由感到困惑。也就是說,如果同一個設計是由不同的人實現的,那么最終的代碼必須是不同的。但有個問題。如果不同的人通

在我最早開始寫css的時候,其代碼上的高自由度就一直很令我困惑。

這就是說,同一個設計,如果讓不同的人來實現,最終的代碼一定是有差異的。

但這存在一個問題,如果不同的人通過不同的方法以及代碼風格,都從外觀上實現了一樣的設計,將很難評價誰做得更好。

想來也是,既然都實現了設計,達到了目的,css這種沒有程序邏輯的代碼中,又能找出什么來說明誰做得更出色呢?  而如今,我認同的觀念是,css這種描述性語言,仍然有著代碼上的質量評判。

評判標準就是可維護性(Maintainability)和性能(Performance),用比較通俗的話說,好的css,要對開發者的工作友好(dev-friendly),也要對瀏覽器友好(browser-friendly)。

本文將說明如何從css選擇符的角度來提高css代碼質量。

  關鍵選擇符與瀏覽器的樣式規則匹配原理  css選擇符的概念,在之前的css優先級詳細解析的開頭部分也有提到,是指每一條樣式規則中,描述把樣式作用到哪些元素的部分,也即{}之前的部分。

在本文,還要額外介紹一個概念:關鍵選擇符(Key selector)。

關鍵選擇符就是在每一條樣式規則起始的{之前的最后一個選擇符,如下圖:

  css選擇符將確定后面的屬性定義要作用到哪些元素,因此存在一個瀏覽器根據css選擇符來應用樣式到對應元素的匹配過程。

關于瀏覽器的樣式匹配系統,David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下內容:  The style system matches a rule by starting with the rightmost selector and moving to the left through the rules 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.  意思是說,瀏覽器引擎在樣式匹配時,以從右向左的順序進行。

在具體匹配某一條樣式規則時,這個從右向左的過程會一直持續,直到讀取完整個選擇符序列并完成匹配,或因某一個地方的不匹配而取消(然后轉到另一條樣式規則)。

  至于為什么瀏覽器會選擇這樣的匹配順序,你可以看看Stack Overflow上的相關討論。

大致上解釋一下的話,由于最右邊的關鍵選擇符直接表示了樣式定義應作用的元素,所以從右向左的順序更利于瀏覽器在初始匹配的時候就確定有樣式定義的元素集合,并更快地在找某一個元素的樣式時避開大多數實際沒有作用到的選擇符。

  更好的css選擇符,是讓瀏覽器在樣式匹配過程中減少匹配查詢次數,以更快的速度完成樣式匹配,從而優化前端性能。

這其中,也必須參考瀏覽器的對于樣式從右向左的匹配順序。

  css選擇符的正確使用方式  更特定,更具體的關鍵選擇符  關鍵選擇符是瀏覽器引擎在樣式匹配時最先讀取到的部分,因此,如果你在某一條樣式規則中使用更特定、具體的選擇符,可以幫助減少瀏覽器的查找匹配次數。

  比如說下邊這樣的選擇符:  CSS Code復制內容到剪貼板  .content .note span{}  最后一個span是關鍵選擇符,而span這個標簽,在網頁中使用是非常多的。

瀏覽器從span開始讀取選擇符,就可能會為因此在樣式匹配上做了一些額外工作。

  如果你確定只是想為具體處于那一個位置的span元素定義樣式,更好的做法是為span命名class,比如命名為span.note_text,然后簡單寫為:  CSS Code復制內容到剪貼板  .note_text{}  使用class選擇符  class選擇符(類選擇符)是最利于性能優化的選擇符。

相對于class,ID的缺點是只允許定義給一個元素,無法重用。

而此外,它在使用上沒有任何比class更好的地方。

很多時候,你很難確定某一個元素是否是唯一的。

另外,使用class來定義樣式,而保留ID給javascript,一直是一個較好的實踐。

如果可以,不使用ID來定義樣式。

  而相對于class,標簽在html中的重復性要更大,因此同樣可能讓瀏覽器在樣式匹配時做更多的額外工作。

如果可以,除css樣式清零(reset)外,不使用標簽選擇符(也叫元素選擇符)。

  縮短選擇符序列  繼承寫法(準確地說,這里指css關系選擇符中的包含選擇符)是css中很常用的寫法。

繼承寫法的初衷是,如果有兩個元素,都是同樣的標簽或有相同的class命名,加入父元素的選擇符組成選擇符序列,就可以避免在不需要的時候兩個元素的樣式互相影響。

比如.confirm_layer .submit_btn就是指,class名為submit_btn,且有一個class名為confirm_layer的父元素的元素,才應用樣式。

  但是,避免元素樣式相互影響,并不代表可以隨意地使用繼承選擇符。

前面提到,瀏覽器會從右向左讀取整個選擇符序列,直到讀取完畢并匹配完成,或者因不匹配而取消。

因此,短的選擇符序列更有利于瀏覽器更快地完成匹配過程。

相對的,冗長的選擇符序列則認為是低效的,比如:  CSS Code復制內容到剪貼板  .header ul li .nav_link{}  建議寫為:  CSS Code復制內容到剪貼板  .header .nav_link{}  一般來說,不超過3層的繼承層級就可以滿足實際中的開發要求。

因此,應減少不必要的繼承層級,使用更短的選擇符序列。

  此外,較長的選擇符序列還有一個問題。

有較長選擇符的樣式規則,css優先級的計算值也較大,因此,如果在以后需要寫新的樣式來覆蓋掉它,就需要寫更長的選擇符(或者使用ID)以獲得更高的css優先級。

這對性能和代碼可讀性都是不利的。

  避免鏈式選擇符  鏈式選擇符(Chaining selectors)是對單個元素同時寫了多個選擇符判定的情況。

比如p.name是指class名為name,且標簽是p的元素,才應用樣式。

這些判定組合可以是ID選擇符,標簽選擇符,class選擇符的任意組合。

  但是,鏈式選擇符是過度定義(over qualified)的,不利于重用,也不利于性能優化。

如:  CSS Code復制內容到剪貼板  a#author{}  建議寫為:  CSS Code復制內容到剪貼板  #author{}  這里的a是不必要的。

一個ID只對應一個元素,沒有必要再強調這個元素的標簽是什么(同理,class也不必)。

另外有:  CSS Code復制內容到剪貼板  .content span.arrow{}  建議寫為:  CSS Code復制內容到剪貼板  .content .arrow{}  這里的span.arrow中的span也是不必要的。

一方面,這為瀏覽器在樣式匹配時增加了一項額外工作:檢查class名為arrow的元素的標簽名是不是span,也因此降低了性能。

另一方面,如果去掉了這個限定,.arrow的樣式定義,就可以用在更多的元素上,也就有著更好的重用性。

否則,就還得告訴別人,使用這個的時候只能用在span標簽上。

  同理,多個class的鏈式寫法,如  CSS Code復制內容到剪貼板  .tips.succuss{}  建議更改命名,寫為:  CSS Code復制內容到剪貼板  .tips_succuss{}  這樣可以幫助瀏覽器減少額外的樣式匹配工作。

  此外,IE6還存在一個鏈式選擇符的問題,多個class選擇符寫在一起時,例如.class1.class2.class3,正常情況是只有同時有這全部的class的元素,才應用樣式。

但IE6只認最后一個,也就是符合.class3這個選擇符的元素,就應用樣式。

  例外情況  前面所述的選擇符的寫法的建議,只是從瀏覽器渲染性能優化,及代碼的重用性方面分析得到的理論結果。

在實際使用中,你并不需要嚴格按照這些內容來做。

例如,如果你確實是準備為class名為intro的元素內的所有a標簽元素都加上某樣式,那么.intro a這樣的選擇符是明智的。

  結語  關于高效的css選擇符的指南,你還可以閱讀google developer中的Use efficient CSS selectors。

  如今,現代瀏覽器在樣式匹配上也逐漸有了更多的優化(參考CSS Selector Performance has changed!),有些方面的內容我們已經不再需要再擔心了。

但是,這并不意味著不需要考慮寫合理的css選擇符了。

css選擇符性能優化是依然存在的事,你的選擇符應該更好地體現你的意圖,而不是隨心所欲地使用。

更重要的是,以這樣一種稍細膩的,經過思考的想法來寫css選擇符,并不是一件困難的事。

只要你想,形成這樣的一種習慣,你就可以自然地在這方面做得更好,何樂而不為呢?

版權聲明:本文由 朱茂實 整理編輯。

原標題:類選擇符,包含選擇符

轉載注明出處:http://www.dn9ww09s.icu/program/14540.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 支付寶中的理財安全嗎,支付寶什么理財最安全

    支付寶中的理財安全嗎,支付寶什么理財最安全 相關圖片支付寶月度理財安全嗎樂邁寶是一款宣傳用戶可以邊消費邊賺錢的軟件。聽起來不可思議,因為這意味著我們買得越多,賺得越多。這顯然是促進消費的一種手段。所以很多人擔心它是...

  • 白條閃付入口沒了,白條閃付的開通條件

    白條閃付入口沒了,白條閃付的開通條件 相關圖片京東白條閃付微信支付看到身邊的小伙伴們打開京東白條,生活變得更加方便。你還想開京東白條付款嗎?如果你想打開京東白條的flash支付,但是你不知道打開的入口在哪里,你可以看...

  • 表單提交,已提交表單

    表單提交,已提交表單 相關圖片html提交表單以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一重大貢獻。以前,我們的HTML表單數據是通過服務器端的鍵值模式傳輸的,缺乏數據組織管理,非常原網頁表單提交...

  • 電腦開機要選擇系統,win7系統如何去除桌面水印

    電腦開機要選擇系統,win7系統如何去除桌面水印 相關圖片電腦開機兩個系統選擇win系統下設置了6個文件夾,包括視頻、圖片、文檔、下載、音樂和桌面。但是由于有六個文件夾,整個資源管理器頁面變得更加復雜。有沒有辦法把這臺電腦下面...

  • 茨林面板,面板

    茨林面板,面板 相關圖片顯示面板快捷鍵可以提高我們平時的工作效率。今天,我將介紹Dreamweaver文件面板的快捷鍵。vcm面板...

  • 哈羅單車開鎖,哈羅單車怎么開鎖

    哈羅單車開鎖,哈羅單車怎么開鎖 相關圖片哈羅單車開鎖破解近日,不少朋友向小編反映,小明自行車的車鎖經常打不開。那么如何應對安卓版小明自行車無法解鎖的情況。今天,超人小編為大家帶來了小明自行車解鎖失敗的解...

  • css有多少選擇符,css的選擇符

    css有多少選擇符,css的選擇符 相關圖片css三種基本選擇符原來的名字可以這么一段時間以前,我在一個網站上看到這樣的內容:這個也可以嗎?這是我的第一印象。不過,經過一番調查,我們知道這確實有效。另外,“U”的...

  • win7桌面圖標異常,win7不顯示桌面圖標

    win7桌面圖標異常,win7不顯示桌面圖標 相關圖片win7桌面圖標怎么變小超人編輯今天想談談win7的一些基礎課程。本課程介紹Windows 7桌面圖標的顯示方法。主要針對Windows7家庭普通版和高級版用戶。沒有個性化配置條目,因win7桌面不顯示...

  • 無障礙專車,滴滴無障礙專車

    無障礙專車,滴滴無障礙專車 相關圖片滴滴關愛出行無障礙車近年來,為有特殊需要的旅客提供專屬服務越來越受到重視。未來,滴滴的安卓版已經宣布,它將能夠使用無障礙汽車為特殊人群。讓我們看看滴滴無障礙車的預...

  • 百分比,百分比怎么求

    百分比,百分比怎么求 相關圖片計算百分比許多CSS屬性的值可以是百分比值。雖然從形式上講,百分比值的形式是數字后跟%值(注意數字和%值之間不能有空格),但其含義在不同的情況下會有所不同。因此,百分率可...

熱評文章

  • 如何將pdf轉換為doc,如何將doc轉換成pdf

    如何將pdf轉換為doc,如何將doc轉換成pdf 相關圖片如何將pdf格式轉換成wordDoc是一種常見的word文檔格式。雖然DOC文檔比較常見,但有時為了方便閱讀DOC文檔,我們會將DOC轉換成PDF文件。所以今天的超人編輯在這里分享如何將do如何將wor...

  • 頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里

    頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里 相關圖片頁眉和頁腳頁腳的位置是頁面的頁腳,通常用于放置幫助鏈接和版權信息。頁腳應該自然位于頁面的底部,但根據一般慣例,如果頁腳之前的頁面內容相對較小,或者使用垂直分辨率較...

  • 文件轉換格式,文件是pdf格式怎么轉換

    文件轉換格式,文件是pdf格式怎么轉換 相關圖片zip格式怎么轉換pdfPdf文件在office中非常實用,但由于不易隨意編輯,很多人不習慣直接編寫Pdf文件。此時,我們可以編輯文檔,然后將其轉換為PDF格式。借助于快速的PDF轉換pdf怎么轉換...

  • 電池狀態,電池狀態顯示維修

    電池狀態,電池狀態顯示維修 相關圖片蘋果電池顯示維修解決移動設備在網絡流量中的份額越來越大,其貢獻的網絡流量也越來越大,我們已經分別為移動設備創建了一些api和設計概念。一個非常典型的例子是W3C電池狀態A...

  • 內涵段子,內涵段子里發的網站

    內涵段子,內涵段子里發的網站 相關圖片發段子內涵段是一種流行的段共享應用。在這個軟件中,用戶可以閱讀各種有趣的故事。那么如何為內容段發送視頻呢?接下來,超人軟件編輯將介紹內容段iPhone視頻的上傳端適合發朋...

  • 折扇教程,折扇制作教程

    折扇教程,折扇制作教程 相關圖片折扇效果圖:第一步:畫原型第二步:畫原型第三步:補充第四步:修改第五步:拿扇形圈第六步:導入材料圖片美化第七步:文字裝飾材料圖片折扇怎么拿...

  • word怎么打不開了怎么辦,所有word文檔都打不開

    word怎么打不開了怎么辦,所有word文檔都打不開 相關圖片word注冊表數據庫損壞Word是我們日常生活中經常使用的辦公應用軟件之一。但是,如果文字不能打開,就會更加混亂,影響工作效率。如果遇到word無法打開并發送錯誤報告的情況,您知...

  • 大連到湖北,湖北大學

    大連到湖北,湖北大學 相關圖片大連在哪里湖北張達是一款面向大學生的手機信息軟件。除了豐富的在線信息外,還為大學生提供了便捷的在線功能。但近日,一位小伙伴回應稱,湖北省大連市不使用互聯網。那么大...

  • 光影涂鴉,光影涂鴉怎么拍

    光影涂鴉,光影涂鴉怎么拍 相關圖片手機拍攝光影涂鴉這種沒有繪畫的涂鴉很受歡迎。它的魅力不僅體現在夜晚的輝煌,更體現在人們對一幅隨時都會幻滅的美麗圖畫的迷戀。總之,在黑暗中,用手電筒對著相機,揮手拍...

  • 哈羅單車計費方式,共享單車計費方式

    哈羅單車計費方式,共享單車計費方式 相關圖片共享單車怎樣收費共享單車現在是這個城市一道美麗的風景線。它有助于我們解決最近幾公里的交通障礙,緩解城市交通。但每輛自行車的收費都不一樣。小明自行車多少錢?我們和小...

關注微信

变脸官网查询