当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 英文教程:五种CSS选择器类型

CSS样式表
英文教程:五种CSS选择器类型
网页缓冲效果特效代码
CSS教程:CSS让网页文字自动隐藏
利用CSS在导航条上标示当前所在频道
CSS教程:网页无序列表标记的设计
.clear方法解决网页自适应高度的问题
CSS教程(7)：网页段落行间距控制的实例
CSS教程(6)：实例学习CSS如何控制网页文本
CSS教程(3)：通过实例学习CSS背景
CSS教程(2)：通过实例学习CSS背景
制作网页使用的CSS样式表错误排查方法
CSS Hack(Safari、Opera、Firefox3和IE7)
CSS教程:vlink,alink,link和a:link
CSS标示导航条当前所在频道
CSS制作网页时遇到BUG的解决方法
CSS教程:clip属性详细讲解
div层被flash层遮盖问题解决思路
CSS教程:CSS控制网页文字排版实例
Web标准建构的站点一览表
CSS实例:vertical-align属性让网页层居中

No. « 13 14 15 16 »

技术文章搜索

关键字

CSS样式表 中的 英文教程:五种CSS选择器类型

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 142 ::
收藏到网摘: n/a


                         英文教程:五种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.ruanchen.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.ruanchen.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.ruanchen.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;}