css優(yōu)先級(jí)_html/css

css優(yōu)先級(jí)
很早以前就知道對(duì)同一個(gè)元素設(shè)置樣式時(shí)應(yīng)用樣式的優(yōu)先級(jí)是
內(nèi)聯(lián)樣式>頁內(nèi)樣式>大于外聯(lián)樣式
id選擇器>class選擇器>標(biāo)簽選擇器
很簡單 一筆帶過
但事實(shí)上 如果是做前端開發(fā)的 還需要更了解詳細(xì)些
1. !important 是擁有絕對(duì)最高優(yōu)先級(jí)的 (設(shè)置此值后無論id選擇器還是內(nèi)聯(lián)樣式都無法撼動(dòng)它)
.set_size{width:inherit !important;}
2.如果不小心在寫樣式時(shí)將外聯(lián)樣式放在了自己單獨(dú)指定的頁內(nèi)樣式前面 外聯(lián)樣式優(yōu)先級(jí)將高于頁內(nèi)樣式 這主要是引入css庫時(shí)需要注意的
但此時(shí)內(nèi)聯(lián)樣式的優(yōu)先級(jí)仍高于外聯(lián)樣式的類選擇器優(yōu)先級(jí)
頁內(nèi)樣式的id選擇器仍高于外聯(lián)樣式的類選擇器
此時(shí) 內(nèi)聯(lián)>外聯(lián)id>頁內(nèi)id>外聯(lián)類選擇>頁內(nèi)類選擇
3.*通配符選擇器,會(huì)選擇頁面所有的元素 相當(dāng)于對(duì)頁面的每一個(gè)元素都應(yīng)用了一次此樣式
很強(qiáng)大,但不好 正確的使用姿勢應(yīng)該是與后代選擇器配合使用 如
.foot_thin *{color:blue;}

正常情況下


內(nèi)聯(lián)>頁內(nèi)id>外部id>頁內(nèi)類選擇>外部類選擇......

后代選擇器優(yōu)先級(jí)高于類選擇器
p span{color:red;}
子選擇器優(yōu)先級(jí)和后代選擇器相等(在寫法相同的情況下)
p > span{color:blue;}
同一css文件中此時(shí)是red還是blue 取決于誰寫在誰的上一行 在后面的優(yōu)先級(jí)不會(huì)更高 但瀏覽器后渲染 定下來了后面的樣式
優(yōu)先級(jí)會(huì)疊加
p.is > span{color:black;} 此時(shí)優(yōu)先級(jí)會(huì)加上類選擇器的優(yōu)先級(jí)

id>后代選擇

256個(gè)類選擇器干掉一個(gè)id選擇器
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

絕不忘記目的( never forgotten purpose )
需要了解css優(yōu)先級(jí)是因?yàn)槲覀冃枰獪?zhǔn)確的精簡冗余低的便利的可重用的高效的選擇元素 從而應(yīng)用樣式 構(gòu)建一個(gè)棒棒的web站點(diǎn)(當(dāng)然性能優(yōu)化這方面的東西很大重頭戲在后臺(tái))
但是這不代表運(yùn)行在前端的東西就不用考慮性能 完全不去考慮前端的性能,這合適嗎？
答案顯而易見

效率從高到低為
id選擇器（#myid）
類選擇器（.myclassname）
標(biāo)簽選擇器（div,h1,p）
相鄰選擇器（h1+p）
子選擇器（ul < li）
后代選擇器（li a）
通配符選擇器（*）
屬性選擇器（a[rel="external"]）
偽類選擇器（a:hover,li:nth-child）
但寫css的前端,大家基本不會(huì)業(yè)余到用id選擇器
而偽類是有必要的而常用的

更多up可讀
http://stevesouders.com/
http://www.tuicool.com/articles/INbuiq
http://csswizardry.com/2011/09/writing-efficient-css-selectors/ or http://www.w3cplus.com/css/css-selector-performance
http://www.jianshu.com/p/268c7f3dd7a6

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com