最常用的五類(lèi)CSS選擇器
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:24:40 作者:佚名
我要評(píng)論
一些新手朋友對(duì)選擇器一知半解,不知道在什么情況下運(yùn)用什么樣的選擇器,這是一個(gè)比較頭疼的問(wèn)題,針對(duì)新手朋友,對(duì)CSS選擇器作一些簡(jiǎn)單的說(shuō)明,希望能對(duì)大家的學(xué)習(xí)工作有一定的幫助,更多的CSS知識(shí)請(qǐng)參考Webjx.com的其他文章。
準(zhǔn)確而簡(jiǎn)潔的運(yùn)用CSS選擇器會(huì)達(dá)到非常好
一些新手朋友對(duì)選擇器一知半解,不知道在什么情況下運(yùn)用什么樣的選擇器,這是一個(gè)比較頭疼的問(wèn)題,針對(duì)新手朋友,對(duì)CSS選擇器作一些簡(jiǎn)單的說(shuō)明,希望能對(duì)大家的學(xué)習(xí)工作有一定的幫助,更多的CSS知識(shí)請(qǐng)參考Webjx.com的其他文章。
準(zhǔn)確而簡(jiǎn)潔的運(yùn)用CSS選擇器會(huì)達(dá)到非常好的效果。我們不必通篇給每一個(gè)元素定義類(lèi)(class)或ID,通過(guò)合適的組織,可以用最簡(jiǎn)單的方法實(shí)現(xiàn)同樣的效果。在實(shí)際工作中,最常用的選擇器有以下五類(lèi):
一、標(biāo)簽選擇器:
顧名思議,標(biāo)簽選擇器是直接將HTML標(biāo)簽作為選擇器,可以是p、h1、dl、strong等HTML標(biāo)簽。如:
p{font:12px;}
em{color:blue;}
dl{float:left;margin-top:10px;}
二、id選擇器:
我們通常給頁(yè)面元素定義id。例如定義一個(gè)層<divid="menubar"></div>然后在樣式表里這樣定義:
#menubar{
margin:0auto;
background:#ccc;
color:#c00;
}
其中"menubar"是你自己定義的id名稱(chēng)。注意在前面加"#"號(hào)。
id選擇器也同樣支持后代選擇器,例如:#menubarp{text-align:center;line-height:20px;;}這個(gè)方法主要用來(lái)定義層和那些比較復(fù)雜,有多個(gè)“唯一后代”的元素。
三、類(lèi)(class)選擇器:
在CSS里用一個(gè)點(diǎn)開(kāi)頭表示類(lèi)別選擇器定義,例如:
.da1{
color:#f60;
font-size:14px;
}
在頁(yè)面中,用class="類(lèi)別名"的方法調(diào)用:<spanclass="da1">14px大小的字體</span>這個(gè)方法比較簡(jiǎn)單靈活,可以隨時(shí)根據(jù)頁(yè)面需要新建和刪除。但需要避免多class綜合癥。
四、群組選擇器:
當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。如:
p,td,li{
line-height:20px;
color:#c00;
}
#mainp,#siderspan{
color:#000;
line-height:26px;
}
.www_52css_com,#mainpspan{
color:#f60;
}
.text1h1,#siderh3,.art_titleh2{
font-weight:100;
}
使用組群選擇器,將會(huì)大大的減化CSS代碼,將具有多個(gè)相同屬性的元素,合并群組進(jìn)行選擇,定義同樣的CSS屬性,這大大的提高了編碼效率與CSS文件體積。
五、后代選擇器:
后代選擇器也叫派生選擇器??梢允褂煤蟠x擇器給一個(gè)元素里的子元素定義樣式,例如這樣:
listrong{
font-style:italic;
font-weight:800;
color:#f00;
}
#mainp{
color:#000;
line-height:26px;
}
#sider.conspan{
color:#000;
line-height:26px;
}
.www_52css_compspan{
color:#f60;
}
#siderulli.subnav1{
margin-top:5px;
}
第一段,就是給li下面的子元素strong定義一個(gè)斜體加粗而且套紅的樣式。其他以此類(lèi)推。
后代選擇器的使用是非常有益的,如果父元素內(nèi)包括的HTML元素具有唯一性,則不必給內(nèi)部元素再指定class或id,直接應(yīng)用此選擇器即可,例如下面的h3與ul就不必指定class或id。
<divid="sider">
<h3></h3>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
在這里CSS就可以及樣寫(xiě):
#siderh3{...}
#siderul{...}
#siderulli{...}
結(jié)合使用上面的四種CSS選擇器,基本滿(mǎn)足了CSS布局的需要,主要在于靈活的使用,特別是后代選擇器的使用能大大的簡(jiǎn)化HTML文檔,使HTML做到結(jié)構(gòu)化明確,最小的代碼實(shí)現(xiàn)同樣的效果。
CSS中用四個(gè)偽類(lèi)來(lái)定義鏈接的樣式,分別是:a:link、a:visited、a:hover和a:active。
例如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
以上語(yǔ)句分別定義了"鏈接、已訪(fǎng)問(wèn)過(guò)的鏈接、鼠標(biāo)停在上方時(shí)、點(diǎn)下鼠標(biāo)時(shí)"的樣式。注意,必須按以上順序?qū)?,否則顯示可能和你預(yù)期的不一致。記住它們的順序是“LVHA”。
準(zhǔn)確而簡(jiǎn)潔的運(yùn)用CSS選擇器會(huì)達(dá)到非常好的效果。我們不必通篇給每一個(gè)元素定義類(lèi)(class)或ID,通過(guò)合適的組織,可以用最簡(jiǎn)單的方法實(shí)現(xiàn)同樣的效果。在實(shí)際工作中,最常用的選擇器有以下五類(lèi):
一、標(biāo)簽選擇器:
顧名思議,標(biāo)簽選擇器是直接將HTML標(biāo)簽作為選擇器,可以是p、h1、dl、strong等HTML標(biāo)簽。如:
p{font:12px;}
em{color:blue;}
dl{float:left;margin-top:10px;}
二、id選擇器:
我們通常給頁(yè)面元素定義id。例如定義一個(gè)層<divid="menubar"></div>然后在樣式表里這樣定義:
#menubar{
margin:0auto;
background:#ccc;
color:#c00;
}
其中"menubar"是你自己定義的id名稱(chēng)。注意在前面加"#"號(hào)。
id選擇器也同樣支持后代選擇器,例如:#menubarp{text-align:center;line-height:20px;;}這個(gè)方法主要用來(lái)定義層和那些比較復(fù)雜,有多個(gè)“唯一后代”的元素。
三、類(lèi)(class)選擇器:
在CSS里用一個(gè)點(diǎn)開(kāi)頭表示類(lèi)別選擇器定義,例如:
.da1{
color:#f60;
font-size:14px;
}
在頁(yè)面中,用class="類(lèi)別名"的方法調(diào)用:<spanclass="da1">14px大小的字體</span>這個(gè)方法比較簡(jiǎn)單靈活,可以隨時(shí)根據(jù)頁(yè)面需要新建和刪除。但需要避免多class綜合癥。
四、群組選擇器:
當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。如:
p,td,li{
line-height:20px;
color:#c00;
}
#mainp,#siderspan{
color:#000;
line-height:26px;
}
.www_52css_com,#mainpspan{
color:#f60;
}
.text1h1,#siderh3,.art_titleh2{
font-weight:100;
}
使用組群選擇器,將會(huì)大大的減化CSS代碼,將具有多個(gè)相同屬性的元素,合并群組進(jìn)行選擇,定義同樣的CSS屬性,這大大的提高了編碼效率與CSS文件體積。
五、后代選擇器:
后代選擇器也叫派生選擇器??梢允褂煤蟠x擇器給一個(gè)元素里的子元素定義樣式,例如這樣:
listrong{
font-style:italic;
font-weight:800;
color:#f00;
}
#mainp{
color:#000;
line-height:26px;
}
#sider.conspan{
color:#000;
line-height:26px;
}
.www_52css_compspan{
color:#f60;
}
#siderulli.subnav1{
margin-top:5px;
}
第一段,就是給li下面的子元素strong定義一個(gè)斜體加粗而且套紅的樣式。其他以此類(lèi)推。
后代選擇器的使用是非常有益的,如果父元素內(nèi)包括的HTML元素具有唯一性,則不必給內(nèi)部元素再指定class或id,直接應(yīng)用此選擇器即可,例如下面的h3與ul就不必指定class或id。
<divid="sider">
<h3></h3>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
在這里CSS就可以及樣寫(xiě):
#siderh3{...}
#siderul{...}
#siderulli{...}
結(jié)合使用上面的四種CSS選擇器,基本滿(mǎn)足了CSS布局的需要,主要在于靈活的使用,特別是后代選擇器的使用能大大的簡(jiǎn)化HTML文檔,使HTML做到結(jié)構(gòu)化明確,最小的代碼實(shí)現(xiàn)同樣的效果。
CSS中用四個(gè)偽類(lèi)來(lái)定義鏈接的樣式,分別是:a:link、a:visited、a:hover和a:active。
例如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
以上語(yǔ)句分別定義了"鏈接、已訪(fǎng)問(wèn)過(guò)的鏈接、鼠標(biāo)停在上方時(shí)、點(diǎn)下鼠標(biāo)時(shí)"的樣式。注意,必須按以上順序?qū)?,否則顯示可能和你預(yù)期的不一致。記住它們的順序是“LVHA”。
相關(guān)文章
該不該使用ID選擇器?淺談對(duì)CSS的ID選擇器的使用建議
在不嵌套單獨(dú)使用ID選擇器的情況下,它是比較快的,然而各種各樣的原因使開(kāi)發(fā)者們拋棄對(duì)ID選擇器的使用.究竟該不該使用ID選擇器?這里我們就來(lái)淺談對(duì)CSS的ID選擇器的使用建議2016-07-11簡(jiǎn)要講解CSS中的類(lèi)型選擇器、ID選擇器、類(lèi)選擇器
這篇文章主要介紹了CSS中的類(lèi)型選擇器和ID選擇器以及類(lèi)選擇器,選擇器時(shí)CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-02-18- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:英文教程:五種CSS選擇器類(lèi)型. CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.Followingarethevariouswaysavaila2009-04-02
IE7對(duì)css選擇器的改進(jìn)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
1、對(duì)偽類(lèi)的支持。IE6和更低的版本對(duì)于偽類(lèi)的支持僅限于a標(biāo)簽,諸如“:hover”、“:active”、“:focus”之類(lèi)的偽類(lèi)理論上是應(yīng)該適用于所有2008-10-17CSS屬性選擇器的四種格式-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
屬性選擇器(AttributeSelectors),或許你不應(yīng)該對(duì)屬性選擇器感到陌生,從本質(zhì)上說(shuō),id跟類(lèi)選擇器其實(shí)就是屬性選擇器,只不過(guò)是選擇了id或者類(lèi)的值(value)而已。2008-10-17- 偽類(lèi),用于給元素的片段添加樣式,這如何理解呢?比如你要讓一個(gè)段落的第一行的文字加粗,那么這個(gè)選擇器是不二之選2012-04-18
- 前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法,今天要和大家一起學(xué)習(xí)CSS3選擇2012-01-21
- 上一切在《CSS3選擇器——基本選擇器》中主要介紹了CSS3選擇器的第一部分,這節(jié)主要和大家一起來(lái)學(xué)習(xí)CSS3選擇器的第二部分——屬性選擇器2012-01-21
- CSS的選擇器,我想大家并不會(huì)陌生吧,因?yàn)樘焯煸谑褂?,但?duì)于CSS3的選擇器,要運(yùn)用的靈活到位,我想對(duì)很多朋友還是一定的難度,特別是CSS3中的:nth選擇器2012-01-21
- *通配符選擇器,經(jīng)常用于css reset(樣式重置),清理標(biāo)簽的默認(rèn)樣式,但現(xiàn)在一般不提倡直接使用*了,主要是*會(huì)匹配所有標(biāo)簽,相當(dāng)耗資源。*在css的優(yōu)先級(jí)中是最低的。2011-07-27

