英文教程:五種CSS選擇器類(lèi)型
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:33:30 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：英文教程:五種CSS選擇器類(lèi)型.
CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.FollowingarethevariouswaysavailabletoattachthesesetofruleswithHTMLcode.
Selector(insimplewords)mea
英文教程:五種CSS選擇器類(lèi)型. CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.FollowingarethevariouswaysavailabletoattachthesesetofruleswithHTMLcode.
Selector(insimplewords)meanshowyounamethesesetofrules.
1CLASSSelectORS
ClassselectorsisthesimplestformofselectorswhereyouassignyourownmeaningfulnametothesetofCSSrules.Tocreateaclassselectoryousimplyneedtowritenameoftheclassfollowedbyaperiod.
(Aclassnamecannotstartwithanumberorasymbolasitisnotsupportedbyvariousbrowsers.)
Forexample,
p.big{font-weight:bold;font-size:12px;}
.center{text-align:center;}
AndthisHTML:
<pclass="big">Thisparagraphwillberenderedbold.m.fzitv.net</p>
Youcanapplymorethanoneclasstoagivenelement.
AndthisHTML:
<pclass="centerbig">Thisparagraphwillberenderedbold.</p>
Intheaboveexample.bigand.centerarenameofCSSclassesandtheseclassesareappliedtoPtaginHTML.
IfclassnameisfollowedbyHTMLelementinyourCSScodelikep.biginaboveexampleitmeansthatthisclasswillworkonPtagonly.
OtherwiseyoucanapplytheCSSclassonanyelement.
It’sagoodpracticetoaddHTMLelementbeforeclassnameinCSSifyouarewritingCSSrulesforaparticularelement(ItaddsmoreclaritytoCSScode.
2IDSelectORS
IDselectorsworklikeclassselectors,exceptthattheycanonlybeusedononeelementperpagebecausetheyworkwithIDofthehtmlelement.TheidselectorisdefinedasidoftheHTMLelementfollowedbya#symbol.
Forexample,
p#navigation{width:12em;color:#666;font-weight:bold;}
AndthisHTML:
<pid="navigation">Thisparagraphwillberenderedbold.m.fzitv.net</p>
AsagoodpracticeIDselectorsmustbeusedifyouarewritingtheCSScodeforasingleHTMLelementonly.IDselectorsarewellsupportedacrossstandards-compliantbrowsers.
3TAGSelectOR
TagselectorisanothersimplemethodofCSSrulesimplementation.YoucanusethisselectortoredefinetherulesforaparticularHTMLelement.
Forexample:
p{color:#999;font-weight:bold;}
IntheaboveexampleCSScodewillbeautomaticallyappliedoneveryptag.
4DESCENDENTSelectORS
Descendentselectorsspecifythatstylesshouldonlybeappliedwhentheelementinquestionisadescendent(forexample,achild,oragrandchild)ofanotherelement.
Forexample,
h3em{color:white;background-color:black;}
AndthisHTML:
<h3>Thisis<em>emphasized</em>m.fzitv.net</h3>
Intheaboveexampleemisdescendentofh3element.Abovecssrulewillautomaticallybeappliedonallemelementsinsideh3elementintheHTMLcode.Descendentselectorsarewellsupportedacrossstandards-compliantbrowsers.
5GROUPINGSelectORS
Youcanalsospecifythesamesetofrulesformorethanoneselctor,likethis:
p,h1,h2{text-align:left;}
Justplaceacommabetweeneachone.
Youcanevengetmorecomplex,andgroupmultipleclassandidselectors:
p.navigation,h1#title{font-weight:bold;}
相關(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-18IE7對(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)CSS選擇器-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
一些新手朋友對(duì)選擇器一知半解，不知道在什么情況下運(yùn)用什么樣的選擇器，這是一個(gè)比較頭疼的問(wèn)題，針對(duì)新手朋友，對(duì)CSS選擇器作一些簡(jiǎn)單的說(shuō)明，希望能對(duì)大家的學(xué)習(xí)工作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