如何使用CSS选择符
如何使用CSS选择符，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联-专业网站定制、快速模板网站建设、高性价比沁县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式沁县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖沁县地区。费用合理售后完善，十载实体公司更值得信赖。
类型选择符(TypeSelectors)
语法：E1
说明：有的时候我们也将它叫做CSS标签选择符，因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符，属于CSS1选择符。
实例：
div{color:#F00;} 这里是测试内容
包含选择符(DescendantSelectors)
语法：E1E2
说明：选择所有被E1包含的E2，这里的E1和E2即可以是html标记，也可以是class或id。目前所有主流浏览器均支持该CSS选择符，属于CSS1选择符。
实例：
divem{color:#F00;} .testem{color:#F00;} 这里是测试内容
这里是测试内容 ID选择符(IDSelectors)
语法：#sID
说明：以DOM中作为对象的***标识符的ID作为选择符。目前所有主流浏览器均支持该选择符，属于CSS1选择符。
实例：
#test{color:#F00;} 这里是测试内容 类选择符(ClassSelectors)
语法：.className
说明：其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className)，其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符，属于CSS1选择符。
实例：
.test{color:#F00;} .test2{font-size:14px;} 这里是测试内容 这里是测试内容 分组选择符(GroupingSelectors)
语法：E1,E2,E3
说明：将同样的定义应用于多个CSS选择符，可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符，属于CSS1选择符。
实例：
.test,p{color:#F00;} 这里是测试内容 这里是测试内容
通配选择符(UniversalSelectors)
语法：*
说明：选定DOM中的所有对象。目前所有主流浏览器均支持该CSS选择符，属于CSS2选择符。
实例：
*{color:#F00;} 这里是测试内容
这里是测试内容
子选择符(ChildSelectors)
语法：E1>E2
说明：选择所有作为E1子对象的E2，不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。
实例：
.test>strong{color:#F00;} 测试的内容 这是测试的内容哦！
测试的内容 相邻选择符(AdjacentSelectors)
语法：E1+E2
说明：选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。
实例：
p+p{color:#F00;} 测试的内容1
测试的内容2
测试的内容3
测试的内容4
测试的内容5
属性选择符(AttributeSelectors)
语法：（CSS选择符中的属性选择符具体再分为4种不同的表现方式）
1.E1[attr]
2.E1[attr=value]
3.E1[attr~=value]
4.E1[attr|=value]
说明：
1.选择具有attr属性的E1
2.选择具有attr属性且属性值等于value的E1
3.选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。
4.选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。
实例：
div[title]{color:#f00;} 测试的内容 div[class=a]{color:#f00;} 测试的内容 测试的内容 div[class~=a]{color:#f00;} 测试的内容 测试的内容 div[title|=a]{color:#f00;} 测试的内容 测试的内容 测试的内容伪类选择符(CSSPseudo-ClassesReference)
语法：（CSS选择符中的伪类选择符共有10种）
1.Selector:link{sRules}
2.Selector:visited{sRules}
3.Selector:hover{sRules}
4.Selector:active{sRules}
5.Selector:focus{sRules}
6.Selector1Selector2:first-child{sRules}
7.Selector:first{sRules}
8.Selector:left{sRules}
9.Selector:right{sRules}
10.Selector:lang{sRules}
说明：
1.设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性（特性）的a对象，此伪类不发生作用。
2.设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性（特性）的a对象，此伪类不发生作用。
3.设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
4.设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
5.设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。
6.设置对象（Selector1）的***个子对象（Selector2）的样式表属性。
7.设置页面容器***页使用的样式表属性。仅用于@page规则。
8.设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。
9.设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。
10.设置对象使用特殊语言的内容样式表属性。
:link,:visited,:hover,:active属于CSS1，目前所有主流浏览器均支持a对象的该4种伪类选择符，非IE浏览器和IE7及以上浏览器还支持非a对象的:hover,:active；:focus,:lang属于CSS2，非IE核心浏览器及IE8支持。
实例：
a:link{color:#f00;} a:visited{color:#666;} a:hover{color:#F60;text-decoration:none;} a:active{color:#000;} css探索之旅 input:focus,a:focus{background:#f00;/*点击或按TAB键获得焦点时生效*/} css探索之旅 divem:first-child{color:#f00;} web前端开发权威指南
伪对象选择符(CSSPseudo-ElementsReference)
语法：（CSS选择符中的伪对象选择符共有4种）
1.Selector:first-letter
2.Selector:first-line
3.Selector:before
4.Selector:after
说明：
1.设置对象内的***个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。
2.设置对象内的***行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。
3.用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
4.用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。
这几个伪对象选择符都为属于CSS2选择符，其中:first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。
实例：
div:first-letter{color:#f00;} 我是一只丑小鸭，伊啊伊啊哟
div:first-line{color:#f00;} 我是一只丑小鸭，伊啊伊啊哟
div:before{content:"web";} 前端开发
div:after{content:"...";} 大段的文字
看完上述内容，你们掌握如何使用CSS选择符的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
当前文章：如何使用CSS选择符
网站地址：http://azwzsj.com/article/pshpis.html
