国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-選擇器

jlanglang / 2154人閱讀

摘要:作為一個前端碼農,不少接觸,懂各種選擇器以及權重值計算很重要,想當然的覺得選擇器沒什么難點的,就像我這樣的,反正一層一層加,肯定能覆蓋我之前寫的,那最后的代碼后期維護起來想想都怕怕哦。

</>復制代碼

  1. 作為一個前端碼農,不少接觸CSS,懂CSS各種選擇器以及權重值計算很重要,想當然的覺得CSS選擇器沒什么難點的,就像我這樣的,反正一層一層加,肯定能覆蓋我之前寫的,那最后的代碼后期維護起來想想都怕怕哦。所以今天利用六分鐘的時間學學CSS選擇器以及權重計算還是很重要的。
常用的CSS選擇器概括

</>復制代碼

  1. 通配符選擇器(*)-0
  2. 標簽選擇器-1
  3. 偽元素(::after,::before,::selection,::first-line,::first:letter)-1
  4. 類選擇器-10
  5. 偽類選擇器(:link,:hover,:active,:visited,:root,:target,:not-10
  6. 屬性選擇器([title],[title=value]-10
  7. id選擇器-100
  8. 內聯樣式-1000

</>復制代碼

  1. 作為補充,
  2. 1. 還有 后代選擇器 ,親子選擇器>,兄長選擇器~,相鄰選擇器+,權重拆分為兩個算再計算求和
  3. 2. !important 最重要權重,優于一切,對于分別給類選擇器和標簽選擇器樣式添加!mportant,按其他選擇器權重和高的樣式為準
通配符選擇器 *

通配符選擇器都是怎么用呢?

一般清除默認樣式的時候,用通配符設置,通配符設置的樣式覆蓋了默認樣式,默認樣式既是繼承,繼承是沒有權重的
因為繼承無權重,所以可以被 通配符 權重為0 的選擇器設置的樣式覆蓋

標簽選擇器,偽元素選擇器

這兩個歸為權重值相同的一類,可以理解。渲染完頁面,控制臺elements展示的源碼中,偽元素作為和標簽一樣展示。

類選擇器,偽類選擇器,屬性選擇器

理解為掛在類選擇器上的,想想是不是?
比如.classs,.class[title],.class[title="text"],.class:hover,:class:active

id選擇器

從理解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

相關文章

  • WEB前端 CSS

    摘要:后代選擇器,兒子選擇器,毗鄰選擇器,弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代,無論直屬還是間接直屬,直接后代毗鄰后代中最近的一個弟弟,找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器 標簽選擇...

    darry 評論0 收藏0
  • 編寫高效的 CSS 選擇CSS魔法

    摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方,哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候,關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了,也不是我一個非得重拾的話題,但它卻是我在工作之時,所感興趣的,關注已久的話題。 有很多人都忘記了,或在簡單的說沒有意識...

    forrest23 評論0 收藏0
  • 編寫高效的 CSS 選擇CSS魔法

    摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方,哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候,關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了,也不是我一個非得重拾的話題,但它卻是我在工作之時,所感興趣的,關注已久的話題。 有很多人都忘記了,或在簡單的說沒有意識...

    hyuan 評論0 收藏0
  • 前端面試題-CSS選擇性能優化

    摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...

    Scott 評論0 收藏0
  • 前端面試題-CSS選擇性能優化

    摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...

    XGBCCC 評論0 收藏0

發表評論

0條評論

jlanglang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<