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

CSS样式表
CSS Sprites 技术分析
csdn 博客的 css样式 v5
CSS 实例实现清除浮动
CSS Sprites 圆角制作教程
关于css @import url（）总结
一个非常精典的纯CSS漫画,登峰造极.
css 背景透明 实现代码
css 横排 实现代码
CSS 像素图制作攻略
CSS 实现绝对底部一个完美解决方案
CSS 代码质量提高的10条实用技巧
CSS 扑克牌效果实现代码
margin 负值引起的层级（z-index）问题
关于Firefox下截取后省略号的问题
14个华丽的javascript图表资源和插件
IE img多余5像素空白解决方法
css 不同媒介的显示样式控制方式
打印网页中不打印页面中的某些内容
CSS Sprites 图片整合技术分析
文字超过宽度显示省略号（无js全兼容）

No. « 76 77 78 79 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 203 ::
收藏到网摘: 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;}