DIV教程之英文教程:五种CSS挑选器范例

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
poluoluo文章简介：英文教程:五种CSS选择器范例.
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.www.webjx.com</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.www.webjx.com</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>www.webjx.com</h3>
Intheaboveexampleemisdescendentofh3element.Abovecssrulewillautomaticallybeappliedonallemelementsinsideh3elementintheHTMLcode.Descendentselectorsarewellsupportedacrossstandards-compliantbrowsers.

5GROUPINGSelectORS

Youcanalsospecifythesamesetofrulesformorethanoneselctor,likethis:

p,h1,h2{text-align:left;}
Justplaceacommabetweeneachone.
Youcanevengetmorecomplex,andgroupmultipleclassandidselectors:

p.navigation,h1#title{font-weight:bold;}
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。