CSS選擇器是用于定位文檔中的元素所在以便設(shè)定相應(yīng)的樣式馍资，常見的選擇器包括：基礎(chǔ)選擇器迷帜、組合選擇器色洞、屬性選擇器火诸、偽類選擇器和偽元素等置蜀。
而優(yōu)先級則是CSS樣式在瀏覽器中被解析的先后順序
css選擇器：
什么是選擇器：用于定位文檔中的元素所在以便設(shè)定相應(yīng)的樣式的盯荤，意義是對文檔設(shè)計樣式時進(jìn)行精確地定位
CSS優(yōu)先級(Specificity)：是指瀏覽器通過此標(biāo)準(zhǔn)來判斷某一屬性與那一元素
優(yōu)先級的計算
W3C中對優(yōu)先級計算有以下規(guī)則秋秤，首先優(yōu)先級的大小用a,b,c,d四個位數(shù)決定脚翘，優(yōu)先級依次遞減来农，如果元素有內(nèi)聯(lián)樣式沃于，a位為1繁莹，b位為ID選擇器的數(shù)量蒋困，c位為屬性選擇器與類選擇器的數(shù)量，d位為元素選擇器與偽類選擇器的數(shù)量零院，通配選擇器的a位計0
1.CSS命名規(guī)范的意義
這里所說i的命名規(guī)范有兩層含義告抄，一是命名含義與元素相關(guān)打洼，二是命名內(nèi)容要精簡，具體例子如下：
命名含義與元素相關(guān)
精簡的命名規(guī)則
從我對命名規(guī)范的理解炫惩，可以演繹出命名規(guī)范的意義所在：
富有含義的命名規(guī)定對于開發(fā)者來說他嚷，更容易讀懂
精簡的命名規(guī)范能夠提高代碼的整潔度和用戶體驗
精簡的含義不僅僅包括命名的簡潔性筋蓖，還包括瀏覽器對頁面的渲染速度粘咖，即良好的命名規(guī)范可以提高頁面渲染速度
良好的命名規(guī)則會在精確性和復(fù)用性上權(quán)衡
.imageplus-append-lu-img-txt{overflow:hidden;margin:10px 0;font-family:Microsoft YaHei;line-height:normal}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item{float:left;position:relative;height:90px;width:125px;box-sizing:border-box}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-img img{height:100%;width:100%}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-desc{position:absolute;bottom:0;left:0;width:100%;height:18px;line-height:18px;font-size:14px;text-align:center;color:#fff;background-color:#000;background-color:rgba(0,0,0,0.6);text-decoration:none}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-desc span{color:#fff} .imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item:hover .imageplus-append-img-txt-ad-item-img{border:2px solid #f60;*height:86px;*width:121px}.imageplus-append-close-btn{display:none}.imageplus-baidu-logo{position:absolute;bottom:0;right:0;z-index:9999;background:url(http://ecma.bdimg.com/public03/imageplus/logo.png) no-repeat;background-position:0 -17px;width:16px;height:16px}.imageplus-ad-logo{position:absolute;left:0;bottom:0;overflow:hidden;z-index:12;background:url(http://ecma.bdimg.com/public03/imageplus/logo.png) no-repeat;background-position:0 0;width:34px;height:16px}.imageplus-append{float:none;margin:0;padding:0;border:0;overflow:hidden;position:static;display:block;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;text-indent:0;display:inline-block} .imageplus-append div{float:none;margin:0;padding:0;border:0;overflow:hidden;position:static;display:block;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;font-family:Microsoft YaHei;line-height:normal}.imageplus-append a,.imageplus-append img,.imageplus-append span{float:none;margin:0;padding:0;border:0;overflow:visible;position:static;display:inline;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;font-family:Microsoft YaHei;line-height:normal}
3.CSS命名優(yōu)化案例
案例1下面的CSS命名極其冗長忠聚，導(dǎo)致光是選擇器就占用不少存儲空間
使用以下的排版方式會更加美觀和精簡一些两蟀，雖然仍會顯得有些長赂毯，但是在可接受范圍內(nèi)党涕。
案例2<div id="test">
? <ul class="test"></ul>
</div>
現(xiàn)在要給這里的ul標(biāo)簽一個樣式膛堤，比如說padding-left:25px;那么下面四種寫法哪個渲染速度最快肥荔？#test .test{}朝群， ul.test{}姜胖，#test ul{} 以及.test{}。無疑蚜锨，.test{}渲染速度最快亚再，《高性能網(wǎng)站進(jìn)階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的针余，就拿#test ul{}舉例圆雁，先渲染頁面上所有的ul標(biāo)簽帆谍，再去尋找id為test的元素汛蝙，而.text{}則是直接匹配到class="text"所在的元素朴肺。
戈稿、面向?qū)傩缘拿椒?/p>
我們習(xí)慣在CSS命名的時候摻雜語義鞍盗，這樣可以讓代碼更易懂般甲。例如淘寶首頁“免費注冊”按鈕上的class名稱：help-guest-regist
上面的class命名語義就很明顯敷存，獨眼龍看告示——一目了然锚烦，”help-guest-regist”就是”幫助-顧客-注冊”挽牢，很nice摊求，很人性化的命名室叉。作為在單一的首頁上使用茧痕，我是很難挑出什么毛病來的踪旷。
但是令野，從道家“無”的哲學(xué)思想來看徽级，語義其實是對自身的一種束縛餐抢，越是語義強(qiáng)烈的命名越是沒有重用性（尤其是內(nèi)容語義的）低匙。舉個實際點的例子顽冶，例如人人網(wǎng)的右側(cè)邊欄的標(biāo)題
如何命名才能讓CSS發(fā)揮最大的重用性潛力呢强重？答案就是“面向?qū)傩缘拿?/em>”团滥。
比很多同行都用過這樣的命名方式灸姊，只是不夠系統(tǒng)力惯，不夠大膽、徹底哮缺，多淺嘗輒止尝苇，比如像是開心網(wǎng)，還有時光網(wǎng)的CSS代碼的前面一部分樣式命名：
.imageplus-append-lu-img-txt{overflow:hidden;margin:10px 0;font-family:Microsoft YaHei;line-height:normal}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item{float:left;position:relative;height:90px;width:125px;box-sizing:border-box}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-img img{height:100%;width:100%}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-desc{position:absolute;bottom:0;left:0;width:100%;height:18px;line-height:18px;font-size:14px;text-align:center;color:#fff;background-color:#000;background-color:rgba(0,0,0,0.6);text-decoration:none}.imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item .imageplus-append-img-txt-ad-item-desc span{color:#fff} .imageplus-append-lu-img-txt .imageplus-append-content .imageplus-append-img-txt-ad-item:hover .imageplus-append-img-txt-ad-item-img{border:2px solid #f60;*height:86px;*width:121px}.imageplus-append-close-btn{display:none}.imageplus-baidu-logo{position:absolute;bottom:0;right:0;z-index:9999;background:url(http://ecma.bdimg.com/public03/imageplus/logo.png) no-repeat;background-position:0 -17px;width:16px;height:16px}.imageplus-ad-logo{position:absolute;left:0;bottom:0;overflow:hidden;z-index:12;background:url(http://ecma.bdimg.com/public03/imageplus/logo.png) no-repeat;background-position:0 0;width:34px;height:16px}.imageplus-append{float:none;margin:0;padding:0;border:0;overflow:hidden;position:static;display:block;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;text-indent:0;display:inline-block} .imageplus-append div{float:none;margin:0;padding:0;border:0;overflow:hidden;position:static;display:block;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;font-family:Microsoft YaHei;line-height:normal}.imageplus-append a,.imageplus-append img,.imageplus-append span{float:none;margin:0;padding:0;border:0;overflow:visible;position:static;display:inline;visibility:visible;text-align:left;background:transparent;-webkit-box-sizing:content-box;box-sizing:content-box;font-family:Microsoft YaHei;line-height:normal}
就拿上面人人網(wǎng)的標(biāo)題樣式舉例非竿，人人網(wǎng)的做法是：
.side-item-header{padding:0 0 8px; text-align:right;}
要是我红柱，我會對其進(jìn)行分離蓖乘。在實際項目時，text-align:right;這個屬性早就在CSS通用樣式庫里面了铁蹈，而padding:0 0 8px;則會以padding-bottom:8px;的形式放在網(wǎng)站通用樣式庫里了（詳細(xì)請參見我的“我是如何對網(wǎng)站CSS進(jìn)行架構(gòu)的”一文）握牧。最后，CSS命名與樣式會如下：
.tr{text-align:right;} .pb8{padding-bottom:8px;}
四览徒、精簡高效CSS命名之“三無原則”
此“三無原則”就是：無ID习蓬，無層級躲叼，無標(biāo)簽
CSS命名就應(yīng)該最簡單企巢、最直接，直搗黃龍或听。沒有HTML標(biāo)簽誉裆，沒有層級缸濒，這些通通滾蛋庇配，不要讨永。為什么不要卿闹，有三大原因：
1. 限制重用
我們會使用層級(#test .test)萝快，會使用標(biāo)簽(ul.test)揪漩，可能是習(xí)慣(沒多想)，或是為了避免沖突冰更。但是，我跟你說舟铜，從今以后奠衔，這種寫法讓他見鬼去吧（如果不是為了改變CSS優(yōu)先級的話）。正如開篇論述的哲學(xué)觀點痊夭，你限制越多她我，越抑制了CSS的重用性膝宁。例如#test .test{}這種寫法员淫，里面的CSS重用性多大，完全限死在了id為test的元素下拴事，哪有重用性可言刃宵；又如ul.test牲证，我勒個去关面，這個ul標(biāo)簽十有八九就是裝飾用的等太，往這兒一放缩抡，同樣CSS樣式的div標(biāo)簽可以用嗎？哭爹喊娘压真，眼淚汪汪也不管用啊榴都。所以嘴高，相信我拴驮，層級啊，標(biāo)簽啊什么的宽气，通通見鬼去吧萄涯。要知道涝影，層級啊争占，標(biāo)簽啊作用是什么，是用來提高CSS優(yōu)先級伯襟，把那個字母長的讓人發(fā)毛的”!important”干掉的姆怪。2. CSS文件大小
這瓜子雖小片效，吃多了也是可以填飽肚子的。所以召调，你的CSS名稱不要像老太太的裹腳布一樣唠叛，搞得又臭又長册舞，如下圖所示的人人網(wǎng)那個冗長的CSS命名吧：你看名稱的字節(jié)數(shù)已經(jīng)比屬性還大了调鲸，要是這些名稱都在15字符以內(nèi)藐石，乖乖于微，這個CSS文件可以小個1~2K絕對沒有問題的。你看下圖這樣子的命名株依，這樣子的CSS排版是不是更舒服恋腕，更簡潔吗坚。
3. 降低了渲染效率
來個例子考考大家（以后我面試別人可能就會考這題）商源，HTML如下：<div id="test"> <ul class="test"></ul> </div>現(xiàn)在要給這里的ul標(biāo)簽一個樣式，比如說padding-left:25px;那么下面四種寫法哪個渲染速度最快谋减？
#test .test{}牡彻， ul.test{}，#test ul{} 以及.test{}出爹。如果單純的ul與.test PK庄吼，我還真拿不定誰的渲染速度更快些。但是严就，一旦牽扯到層級與標(biāo)簽总寻，我100%確定，.test這種最直接的命名方式渲染效率是最高的梢为。要知道渐行，CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素，則#test ul{}速度是最快的，先id獲取站蝠，再tag獲取，這些可都是JavaScript內(nèi)置的方法。但是肥隆，CSS的渲染方式則是屬于外太空系的了句各，《高性能網(wǎng)站進(jìn)階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的，就拿#test ul{}舉例件蚕，先渲染頁面上所有的ul標(biāo)簽妄痪，再去尋找id為test的元素僧著，所以站故，出現(xiàn)#test div{}這種寫法的人都是傻×的岂津，頁面先渲染id為test的元素？非也粱甫！先渲染頁面上所有的div宗挥，再去尋找其老爸有沒有id為test的元素瞒大。由于這種渲染差異最大就200~300毫秒（補(bǔ)充：這里的差異不是說單純一個樣式的差異拙泽，而是這些寫法泛濫的頁面的全部渲染德绿，其渲染差異數(shù)據(jù)可以參見“翻譯-不同CSS技術(shù)及其CSS性能”一文）会油，我們?nèi)艘话闶歉杏X不到的稻薇。所以案狠，長久以來，也都不以為然。但是，我是絕對容不下這種寫法的，還有，要是讓我看到類似于ul#test{}這樣子的命名，不好意思，面試肯定過不了浅碾。
所以埂陆，CSS命名购裙，只要出現(xiàn)了層級薇芝，出現(xiàn)了標(biāo)簽阅爽，就是一次額外的渲染，層級越多赫粥，渲染的開銷也就越大晦溪，這就是為什么一些前輩的文章會建議要盡量避免過深的層級修噪。這也是為什么要“無層級”裤园，“無標(biāo)簽”万俗。
對于原則第一條“無ID”论矾，其實與性能沒有多大關(guān)系钻注，只是一般ID都與JavaScript有奸情，如果再牽扯到CSS樣式液荸，如此復(fù)雜的三角關(guān)系捺弦，日后不好處理啊。
五咨油、“三無原則”遺留之樣式?jīng)_突問題
正如上面講的唁奢，層級千所，標(biāo)簽可以避免樣式?jīng)_突，雖然“面向?qū)傩缘拿辈淮嬖跊_突問題适瓦，但是，頁面上很多樣式是無法分離使用“面向?qū)傩缘拿钡墓迷藭r朵逝，一不能有
級，二不能有標(biāo)簽为朋，如果避免沖突呢融涣？http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/首先科雳，規(guī)范。項目組所有人的命名方法，習(xí)慣都要統(tǒng)一悲龟。其次轻腺，也是實際的做法煤蚌，同一內(nèi)容，使用同一前綴止毕。就如上面的那張圖片所示，所有class同一使用od前綴扁凛，這樣忍疾，就絕不會與其他頁面的CSS產(chǎn)生沖突了。
