亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css-選擇器

jlanglang / 2257人閱讀

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

作為一個(gè)前端碼農(nóng)，不少接觸CSS，懂CSS各種選擇器以及權(quán)重值計(jì)算很重要，想當(dāng)然的覺得CSS選擇器沒什么難點(diǎn)的，就像我這樣的，反正一層一層加，肯定能覆蓋我之前寫的，那最后的代碼后期維護(hù)起來想想都怕怕哦。所以今天利用六分鐘的時(shí)間學(xué)學(xué)CSS選擇器以及權(quán)重計(jì)算還是很重要的。
常用的CSS選擇器概括 

通配符選擇器（*）-0
標(biāo)簽選擇器-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


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

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

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

標(biāo)簽選擇器，偽元素選擇器

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

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

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

id選擇器

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

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

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

除了權(quán)重之外

以上選擇器是有權(quán)重計(jì)算的，還常常見到因?yàn)轫樞蛞约霸O(shè)置css來源不同，導(dǎo)致渲染出結(jié)果不同的情況，解析：

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

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

其都是偽類元素，權(quán)重一樣，后覆蓋前，所以為了防止點(diǎn)擊后（visited）以及 未訪問(:link)，:hover
和:active不能觸發(fā)，設(shè)置了LVHA原則。
因?yàn)槿魏捂溄硬皇且言L問，就是未訪問，所以將lV放后面會(huì)覆蓋前兩個(gè) 的樣式。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116674.html

相關(guān)文章

  • WEB前端 CSS

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

    darry 評(píng)論0 收藏0

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

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

    forrest23 評(píng)論0 收藏0

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

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

    hyuan 評(píng)論0 收藏0

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

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

    Scott 評(píng)論0 收藏0

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

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

    XGBCCC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<