css選擇器優(yōu)先級(jí)深入理解
發(fā)布時(shí)間：2012-12-04 10:44:13 作者：佚名 
我要評(píng)論
我要評(píng)論css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級(jí),這會(huì)給正在解決優(yōu)先級(jí)問(wèn)題的朋友，帶來(lái)些許幫助
一、基礎(chǔ)選擇器
css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器
1.標(biāo)簽選擇器
每個(gè)html頁(yè)面都由很多個(gè)標(biāo)簽組成，通過(guò)標(biāo)簽選擇器可以對(duì)某類標(biāo)簽應(yīng)用相應(yīng)的樣式，如對(duì)p標(biāo)簽應(yīng)用下面的樣式，則頁(yè)面中所有的p標(biāo)簽都會(huì)生效
p{ font-size:12px; color:red; background:blue; }
2.類選擇器
類選擇器是css非常常用的選擇器，在html中可以為某個(gè)標(biāo)簽增加class屬性，如
<div class="error"> </div>
則可以為對(duì)應(yīng)的class設(shè)置樣式
error{ width:200px; padding:5px; color:red;}
類選擇器可以復(fù)用，如對(duì)頁(yè)面中的p標(biāo)簽也可以應(yīng)用此樣式
This is a test!
另外，一個(gè)標(biāo)簽可以有多個(gè)類選擇器，不同的值用空格隔開(kāi)，這樣多個(gè)樣式便可以應(yīng)用的一個(gè)標(biāo)簽上。
3.id選擇器
id選擇器和類選擇器一樣，用的也很頻繁，但是id在每個(gè)html頁(yè)面的值必須是唯一的，所以它不可以復(fù)用，如：
<div id="content"> </div>
這里補(bǔ)充說(shuō)明下id與class的命名規(guī)范，命名時(shí)盡可能的保持名稱與表現(xiàn)形式無(wú)關(guān)，如 某段提示文字顯示為紅色，可以命名為red，但是若日后改成藍(lán)色，則red名與之不對(duì)應(yīng)，更好的選擇如error或tips。所以應(yīng)該根據(jù)它是什么來(lái)命名 而不是 根據(jù) 它的外觀如何來(lái)命名。
4.通用選擇器
不同于上面的三種選擇器，通用選擇器要強(qiáng)大的多，它可以對(duì)頁(yè)面中的所有html標(biāo)簽應(yīng)用樣式，當(dāng)然也正是因?yàn)槿绱藦?qiáng)大，反而限制了它的靈活性，在實(shí)際應(yīng)用中用的較少。一般簡(jiǎn)單的css reset會(huì)用到，如：
*{ margin:0; padding:0;}
二、組合選擇器
1.群主選擇器
在使用選擇器時(shí),有的元素樣式是一樣的，每次都為不同的選擇器單獨(dú)定義樣式的話太繁瑣，這時(shí)我們便可以使用群主選擇器集中定義樣式。不同標(biāo)簽或類以逗號(hào)隔開(kāi)。如：
div, h2, .error{ font-size:14px; color:red;}
這樣我們便同時(shí)給div, h2, .error一起定義了樣式。
2.子選擇器
當(dāng)我們想讓父元素下的某個(gè)子元素表現(xiàn)為特定的樣式時(shí)，我們可以用子選擇器，如
div>a{ color:blue; text-decoration:none;}
此時(shí)，div下的子元素a都將變成藍(lán)色字體，無(wú)下劃線。
3.后代選擇器
在上面的例子中，利用子選擇器，只可以設(shè)置div下的子元素a，但是若想改變div下的所有a標(biāo)簽的樣式，就需要用到后代選擇器。代碼如下:
div a{ color:blue; text-decoration:none;}
4.同胞選擇器
除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個(gè)當(dāng)中的一個(gè)，如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器?？聪旅娴拇a：
h1 + p{font-size:14px; background:#ccc; }
三、屬性選擇器說(shuō)明：以下提到的E表示元素，attr表示屬性，val表示屬性的值
1.E[attr]選擇器
匹配所有具有attr屬性的E元素，不考慮它的值。如以下代碼可以匹配所有含有title屬性的p元素。
p[title]{font-size:12px; color:#666;}
2.E[attr=val]
匹配所有attr屬性值為val的E元素。如匹配所有class值為test的p元素
p[class="test"]{color:red;}
3.E[attr~=val]
匹配具有attr屬性且屬性值為用空格分隔的字符列表，其中一個(gè)值等于val的E元素。如：
p[class~="name"]{font-size:12px; color:red;}
<div class="test name">111111</div><div class="name">111111</div>
則第一個(gè)div會(huì)應(yīng)用上面的樣式。
4.E[attr|=val]
匹配具有attr屬性且屬性值為用連接符分隔的字符串，并以val開(kāi)頭的E元素。
p[class|="test"]{font-size:12px; color:red;}
<div class="test">111111</div><div class="test-123">111111</div>
則第二個(gè)div會(huì)應(yīng)用上面的樣式。
最后不得不提的是IE6不支持子選擇器、同胞選擇器和屬性選擇器，因此使用時(shí)需注意。
css優(yōu)先級(jí)
優(yōu)先級(jí)算是css中的一個(gè)非常重要的知識(shí)點(diǎn)，也是筆試面試中經(jīng)常會(huì)考到的知識(shí)點(diǎn)。
一、什么是css優(yōu)先級(jí)
css優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。
二、css優(yōu)先級(jí)規(guī)則
比較簡(jiǎn)單易記的一種方法就是給不同選擇器分配不同的值：
1.id選擇器默認(rèn)優(yōu)先級(jí)最高，其權(quán)值為100
2.class選擇器、屬性選擇器和偽類選擇器的權(quán)值為10
3.標(biāo)簽選擇器的優(yōu)先級(jí)較低，其權(quán)值為1
所以在比較樣式的優(yōu)先級(jí)時(shí)，只需統(tǒng)計(jì)選擇符中的id、class、標(biāo)簽名個(gè)數(shù)，然后把對(duì)應(yīng)的權(quán)值相加即可。根據(jù)結(jié)果便可得出優(yōu)先級(jí)高低。
1.結(jié)果較大的優(yōu)先級(jí)較高
2.結(jié)果相同，則后定義的樣式優(yōu)先級(jí)較高
3.如果樣式值中含有!important，則該值優(yōu)先級(jí)最高
舉例：
h2{color:blue;}//其權(quán)值為1
#content{color:#666;}//其權(quán)值為100p
.test{color:#ccc;}//其權(quán)值為1+10=11
#main div .test{color:red;}//其權(quán)值為100+1+10=111div
#main .left #nav{color:#000}//其權(quán)值為1+100+10+100=211
css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器
1.標(biāo)簽選擇器
每個(gè)html頁(yè)面都由很多個(gè)標(biāo)簽組成，通過(guò)標(biāo)簽選擇器可以對(duì)某類標(biāo)簽應(yīng)用相應(yīng)的樣式，如對(duì)p標(biāo)簽應(yīng)用下面的樣式，則頁(yè)面中所有的p標(biāo)簽都會(huì)生效
復(fù)制代碼
代碼如下:p{ font-size:12px; color:red; background:blue; }
2.類選擇器
類選擇器是css非常常用的選擇器，在html中可以為某個(gè)標(biāo)簽增加class屬性，如
復(fù)制代碼
代碼如下:<div class="error"> </div>
則可以為對(duì)應(yīng)的class設(shè)置樣式
復(fù)制代碼
代碼如下:error{ width:200px; padding:5px; color:red;}
類選擇器可以復(fù)用，如對(duì)頁(yè)面中的p標(biāo)簽也可以應(yīng)用此樣式
復(fù)制代碼
代碼如下:This is a test!
另外，一個(gè)標(biāo)簽可以有多個(gè)類選擇器，不同的值用空格隔開(kāi)，這樣多個(gè)樣式便可以應(yīng)用的一個(gè)標(biāo)簽上。
3.id選擇器
id選擇器和類選擇器一樣，用的也很頻繁，但是id在每個(gè)html頁(yè)面的值必須是唯一的，所以它不可以復(fù)用，如：
復(fù)制代碼
代碼如下:<div id="content"> </div>
這里補(bǔ)充說(shuō)明下id與class的命名規(guī)范，命名時(shí)盡可能的保持名稱與表現(xiàn)形式無(wú)關(guān)，如 某段提示文字顯示為紅色，可以命名為red，但是若日后改成藍(lán)色，則red名與之不對(duì)應(yīng)，更好的選擇如error或tips。所以應(yīng)該根據(jù)它是什么來(lái)命名 而不是 根據(jù) 它的外觀如何來(lái)命名。
4.通用選擇器
不同于上面的三種選擇器，通用選擇器要強(qiáng)大的多，它可以對(duì)頁(yè)面中的所有html標(biāo)簽應(yīng)用樣式，當(dāng)然也正是因?yàn)槿绱藦?qiáng)大，反而限制了它的靈活性，在實(shí)際應(yīng)用中用的較少。一般簡(jiǎn)單的css reset會(huì)用到，如：
復(fù)制代碼
代碼如下:*{ margin:0; padding:0;}
二、組合選擇器
1.群主選擇器
在使用選擇器時(shí),有的元素樣式是一樣的，每次都為不同的選擇器單獨(dú)定義樣式的話太繁瑣，這時(shí)我們便可以使用群主選擇器集中定義樣式。不同標(biāo)簽或類以逗號(hào)隔開(kāi)。如：
復(fù)制代碼
代碼如下:div, h2, .error{ font-size:14px; color:red;}
這樣我們便同時(shí)給div, h2, .error一起定義了樣式。
2.子選擇器
當(dāng)我們想讓父元素下的某個(gè)子元素表現(xiàn)為特定的樣式時(shí)，我們可以用子選擇器，如
復(fù)制代碼
代碼如下:div>a{ color:blue; text-decoration:none;}
此時(shí)，div下的子元素a都將變成藍(lán)色字體，無(wú)下劃線。
3.后代選擇器
在上面的例子中，利用子選擇器，只可以設(shè)置div下的子元素a，但是若想改變div下的所有a標(biāo)簽的樣式，就需要用到后代選擇器。代碼如下:
復(fù)制代碼
代碼如下:div a{ color:blue; text-decoration:none;}
4.同胞選擇器
除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個(gè)當(dāng)中的一個(gè)，如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器?？聪旅娴拇a：
復(fù)制代碼
代碼如下:h1 + p{font-size:14px; background:#ccc; }
三、屬性選擇器說(shuō)明：以下提到的E表示元素，attr表示屬性，val表示屬性的值
1.E[attr]選擇器
匹配所有具有attr屬性的E元素，不考慮它的值。如以下代碼可以匹配所有含有title屬性的p元素。
復(fù)制代碼
代碼如下:p[title]{font-size:12px; color:#666;}
2.E[attr=val]
匹配所有attr屬性值為val的E元素。如匹配所有class值為test的p元素
復(fù)制代碼
代碼如下:p[class="test"]{color:red;}
3.E[attr~=val]
匹配具有attr屬性且屬性值為用空格分隔的字符列表，其中一個(gè)值等于val的E元素。如：
復(fù)制代碼
代碼如下:p[class~="name"]{font-size:12px; color:red;}
復(fù)制代碼
代碼如下:<div class="test name">111111</div><div class="name">111111</div>
則第一個(gè)div會(huì)應(yīng)用上面的樣式。
4.E[attr|=val]
匹配具有attr屬性且屬性值為用連接符分隔的字符串，并以val開(kāi)頭的E元素。
復(fù)制代碼
代碼如下:p[class|="test"]{font-size:12px; color:red;}
<div class="test">111111</div><div class="test-123">111111</div>
則第二個(gè)div會(huì)應(yīng)用上面的樣式。
最后不得不提的是IE6不支持子選擇器、同胞選擇器和屬性選擇器，因此使用時(shí)需注意。
css優(yōu)先級(jí)
優(yōu)先級(jí)算是css中的一個(gè)非常重要的知識(shí)點(diǎn)，也是筆試面試中經(jīng)常會(huì)考到的知識(shí)點(diǎn)。
一、什么是css優(yōu)先級(jí)
css優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。
二、css優(yōu)先級(jí)規(guī)則
比較簡(jiǎn)單易記的一種方法就是給不同選擇器分配不同的值：
1.id選擇器默認(rèn)優(yōu)先級(jí)最高，其權(quán)值為100
2.class選擇器、屬性選擇器和偽類選擇器的權(quán)值為10
3.標(biāo)簽選擇器的優(yōu)先級(jí)較低，其權(quán)值為1
所以在比較樣式的優(yōu)先級(jí)時(shí)，只需統(tǒng)計(jì)選擇符中的id、class、標(biāo)簽名個(gè)數(shù)，然后把對(duì)應(yīng)的權(quán)值相加即可。根據(jù)結(jié)果便可得出優(yōu)先級(jí)高低。
1.結(jié)果較大的優(yōu)先級(jí)較高
2.結(jié)果相同，則后定義的樣式優(yōu)先級(jí)較高
3.如果樣式值中含有!important，則該值優(yōu)先級(jí)最高
舉例：
復(fù)制代碼
代碼如下:h2{color:blue;}//其權(quán)值為1
#content{color:#666;}//其權(quán)值為100p
.test{color:#ccc;}//其權(quán)值為1+10=11
#main div .test{color:red;}//其權(quán)值為100+1+10=111div
#main .left #nav{color:#000}//其權(quán)值為1+100+10+100=211
相關(guān)文章
- 作為一個(gè)Web開(kāi)發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級(jí)問(wèn)題，為了廣大web愛(ài)好者可以更好的解決問(wèn)題，這里就CSS選擇器的優(yōu)先級(jí)問(wèn)題做了一些總結(jié)2013-08-01
CSS控制樣式的三種方式(優(yōu)先級(jí)對(duì)比驗(yàn)證)
大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時(shí)候，有三種引入方式,這里簡(jiǎn)單介紹下CSS控制樣式的三種方式2013-07-22CSS優(yōu)先級(jí)的相關(guān)知識(shí)詳細(xì)介紹
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來(lái)約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是本次所需要講的重點(diǎn)2013-04-22網(wǎng)頁(yè)css優(yōu)先級(jí)為您詳細(xì)解讀
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡(jiǎn)稱，我們能通過(guò)CSS為文檔設(shè)置豐富且易于修改的外觀2013-04-19- css樣式優(yōu)先級(jí)是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個(gè)問(wèn)題貌似一直存在我們身邊卻一直無(wú)從選擇，接下來(lái)用實(shí)例為大家說(shuō)明下，到底哪個(gè)高點(diǎn)，2013-03-14
CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問(wèn)題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況.有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01CSS優(yōu)先級(jí)和!important與IE6的BUG討論及解決方案
本來(lái)我對(duì)他誰(shuí)的ie6不支持!important也沒(méi)什么異議，可是正好在前幾天正好用個(gè)這個(gè)!important屬性解決了一個(gè)樣式優(yōu)先級(jí)的問(wèn)題，而且是支持ie6的，這是為什么呢？到底ie6支不2013-01-23IE6下CSS多類選擇符優(yōu)先級(jí)不起作用的bug分析及解決方法
IE6，這個(gè)前端開(kāi)發(fā)的夢(mèng)魘總是在你不經(jīng)意的時(shí)候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級(jí)不起作用，多么的令人氣憤啊，經(jīng)過(guò)測(cè)試：IE6下這種類組合的優(yōu)先級(jí)不如單個(gè)類， 感2013-01-23- css樣式的優(yōu)先級(jí)是一個(gè)龐雜的知識(shí)點(diǎn)，我甚至覺(jué)得它的龐雜可以與“浮動(dòng)”以及“框模型”相提并論,今天就利用點(diǎn)時(shí)間把我所了解的寫下來(lái)，大家共同進(jìn)步2013-01-11
- CSS的調(diào)用方式一共有4種，分別是：行內(nèi)樣式，內(nèi)嵌式，link鏈接式，@import導(dǎo)入式，在同級(jí)的前提下，我們可以按樣就近原則來(lái)理解他們的優(yōu)先級(jí)，則越前定義的樣式，會(huì)被后面2010-07-23