英文教程:五种CSS选择器类型. CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.FollowingarethevariouswaysavailabletoattachthesesetofruleswithHTMLcode.Selector(insimplewords)meanshowyounamethesesetofrules.1CLASSSelectORSClassselectorsisthesimplestformofselectorswhereyouassignyourownmeaningfulnametothesetofCSSrules.Tocreateaclassselectoryousimplyneedtowritenameoftheclassfollowedbyaperiod.(Aclassnamecannotstartwithanumberorasymbolasitisnotsupportedbyvariousbrowsers.)Forexample, p.big{font-weight:bold;font-size:12px;}.center{text-align:center;} AndthisHTML: <pclass="big">Thisparagraphwillberenderedbold.www.jb51.net</p> Youcanapplymorethanoneclasstoagivenelement.AndthisHTML: <pclass="centerbig">Thisparagraphwillberenderedbold.</p> Intheaboveexample.bigand.centerarenameofCSSclassesandtheseclassesareappliedtoPtaginHTML.IfclassnameisfollowedbyHTMLelementinyourCSScodelikep.biginaboveexampleitmeansthatthisclasswillworkonPtagonly.OtherwiseyoucanapplytheCSSclassonanyelement.It’sagoodpracticetoaddHTMLelementbeforeclassnameinCSSifyouarewritingCSSrulesforaparticularelement(ItaddsmoreclaritytoCSScode.2IDSelectORSIDselectorsworklikeclassselectors,exceptthattheycanonlybeusedononeelementperpagebecausetheyworkwithIDofthehtmlelement.TheidselectorisdefinedasidoftheHTMLelementfollowedbya#symbol.Forexample, p#navigation{width:12em;color:#666;font-weight:bold;} AndthisHTML: <pid="navigation">Thisparagraphwillberenderedbold.www.jb51.net</p> AsagoodpracticeIDselectorsmustbeusedifyouarewritingtheCSScodeforasingleHTMLelementonly.IDselectorsarewellsupportedacrossstandards-compliantbrowsers.3TAGSelectORTagselectorisanothersimplemethodofCSSrulesimplementation.YoucanusethisselectortoredefinetherulesforaparticularHTMLelement.Forexample: p{color:#999;font-weight:bold;} IntheaboveexampleCSScodewillbeautomaticallyappliedoneveryptag.4DESCENDENTSelectORSDescendentselectorsspecifythatstylesshouldonlybeappliedwhentheelementinquestionisadescendent(forexample,achild,oragrandchild)ofanotherelement.Forexample, h3em{color:white;background-color:black;} AndthisHTML: <h3>Thisis<em>emphasized</em>www.jb51.net</h3> Intheaboveexampleemisdescendentofh3element.Abovecssrulewillautomaticallybeappliedonallemelementsinsideh3elementintheHTMLcode.Descendentselectorsarewellsupportedacrossstandards-compliantbrowsers.5GROUPINGSelectORSYoucanalsospecifythesamesetofrulesformorethanoneselctor,likethis: p,h1,h2{text-align:left;} Justplaceacommabetweeneachone.Youcanevengetmorecomplex,andgroupmultipleclassandidselectors: p.navigation,h1#title{font-weight:bold;}

　　推荐阅读

　　CSS的内容注释和作者及文件版本注释

作者及文件版本:此定义可以帮助您或其他人更了解整个网站以及这个CSS文件，格式化的注释;内容注释就像CSS里的书签，好的内容注释能让你轻松穿越你的CSS ，不感混乱，一切井然有序。>>>详细阅读

本文标题：英文教程:五种CSS选择器类型

地址：http://www.17bianji.com/kaifa2/CSS/17051.html

 1/2    1