摘要:作為一個前端碼農,不少接觸,懂各種選擇器以及權重值計算很重要,想當然的覺得選擇器沒什么難點的,就像我這樣的,反正一層一層加,肯定能覆蓋我之前寫的,那最后的代碼后期維護起來想想都怕怕哦。
常用的CSS選擇器概括</>復制代碼
作為一個前端碼農,不少接觸CSS,懂CSS各種選擇器以及權重值計算很重要,想當然的覺得CSS選擇器沒什么難點的,就像我這樣的,反正一層一層加,肯定能覆蓋我之前寫的,那最后的代碼后期維護起來想想都怕怕哦。所以今天利用六分鐘的時間學學CSS選擇器以及權重計算還是很重要的。
</>復制代碼
通配符選擇器(*)-0
標簽選擇器-1
偽元素(::after,::before,::selection,::first-line,::first:letter)-1
類選擇器-10
偽類選擇器(:link,:hover,:active,:visited,:root,:target,:not)-10
屬性選擇器([title],[title=value])-10
id選擇器-100
內聯樣式-1000
</>復制代碼
作為補充,
1. 還有 后代選擇器 ,親子選擇器>,兄長選擇器~,相鄰選擇器+,權重拆分為兩個算再計算求和
2. !important 最重要權重,優于一切,對于分別給類選擇器和標簽選擇器樣式添加!mportant,按其他選擇器權重和高的樣式為準
通配符選擇器 *
通配符選擇器都是怎么用呢?
一般清除默認樣式的時候,用通配符設置,通配符設置的樣式覆蓋了默認樣式,默認樣式既是繼承,繼承是沒有權重的
因為繼承無權重,所以可以被 通配符 權重為0 的選擇器設置的樣式覆蓋
這兩個歸為權重值相同的一類,可以理解。渲染完頁面,控制臺elements展示的源碼中,偽元素作為和標簽一樣展示。
類選擇器,偽類選擇器,屬性選擇器理解為掛在類選擇器上的,想想是不是?
比如.classs,.class[title],.class[title="text"],.class:hover,:class:active
從理解js獲取dom節點來看,getElementByID,獲取到的只有一個,可想而知比class權重也高,只能唯一設置,享有唯一性。
內聯選擇器</>復制代碼
記住就近原則,可想而知內聯選擇器權重值最大---1000,上面的依次減一個0,最后通配符0
除了權重之外以上選擇器是有權重計算的,還常常見到因為順序以及設置css來源不同,導致渲染出結果不同的情況,解析:
就近原則
內聯樣式一定優先于外聯樣式,
同等權重時后設置樣式一定大于前設置的樣式,
用戶自定義的 > 開發人員設置的 > 用戶代理默認的(瀏覽器默認的)
由此推薦鏈接樣式排序(link-visited-hover-active, LVHA)
其都是偽類元素,權重一樣,后覆蓋前,所以為了防止點擊后(visited)以及 未訪問(:link),:hover
和:active不能觸發,設置了LVHA原則。
因為任何鏈接不是已訪問,就是未訪問,所以將lV放后面會覆蓋前兩個 的樣式。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116674.html
摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方,哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候,關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了,也不是我一個非得重拾的話題,但它卻是我在工作之時,所感興趣的,關注已久的話題。 有很多人都忘記了,或在簡單的說沒有意識...
摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方,哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候,關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了,也不是我一個非得重拾的話題,但它卻是我在工作之時,所感興趣的,關注已久的話題。 有很多人都忘記了,或在簡單的說沒有意識...
摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...
摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...
閱讀 641·2021-09-22 10:02
閱讀 6389·2021-09-03 10:49
閱讀 569·2021-09-02 09:47
閱讀 2155·2019-08-30 15:53
閱讀 2932·2019-08-30 15:44
閱讀 904·2019-08-30 13:20
閱讀 1818·2019-08-29 16:32
閱讀 893·2019-08-29 12:46