成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css-選擇器

jlanglang / 2156人閱讀

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

作為一個前端碼農(nóng)，不少接觸CSS，懂CSS各種選擇器以及權(quán)重值計算很重要，想當然的覺得CSS選擇器沒什么難點的，就像我這樣的，反正一層一層加，肯定能覆蓋我之前寫的，那最后的代碼后期維護起來想想都怕怕哦。所以今天利用六分鐘的時間學學CSS選擇器以及權(quán)重計算還是很重要的。
常用的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
內(nèi)聯(lián)樣式-1000


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

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

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

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

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

類選擇器，偽類選擇器，屬性選擇器

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

id選擇器

從理解js獲取dom節(jié)點來看，getElementByID,獲取到的只有一個，可想而知比class權(quán)重也高，只能唯一設(shè)置，享有唯一性。

內(nèi)聯(lián)選擇器

記住就近原則，可想而知內(nèi)聯(lián)選擇器權(quán)重值最大---1000，上面的依次減一個0，最后通配符0

除了權(quán)重之外

以上選擇器是有權(quán)重計算的，還常常見到因為順序以及設(shè)置css來源不同，導致渲染出結(jié)果不同的情況，解析：

就近原則
內(nèi)聯(lián)樣式一定優(yōu)先于外聯(lián)樣式，
同等權(quán)重時后設(shè)置樣式一定大于前設(shè)置的樣式，
用戶自定義的 > 開發(fā)人員設(shè)置的 > 用戶代理默認的（瀏覽器默認的）

由此推薦鏈接樣式排序(link-visited-hover-active, LVHA)

其都是偽類元素，權(quán)重一樣，后覆蓋前，所以為了防止點擊后（visited）以及 未訪問(:link)，:hover
和:active不能觸發(fā)，設(shè)置了LVHA原則。
因為任何鏈接不是已訪問，就是未訪問，所以將lV放后面會覆蓋前兩個 的樣式。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116674.html

相關(guān)文章

  • WEB前端 CSS

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

    darry 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

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

    forrest23 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

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

    hyuan 評論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

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

    Scott 評論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

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

    XGBCCC 評論0 收藏0

發(fā)表評論

0條評論

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