今天小编跟大家讲解下有关CSS 选择符的用法和实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 选择符的用法和实例 的相关资料，希望小伙伴们看了有所帮助。
虽然之前已经有不少对于CSS选择符的文章在网络上出现，不过我还是准备以自己的方式来写一写，这也是一种获得乐趣的途径。所以我小小的总结了一下css1及css2选择符（本文的CSS选择符都为css1及css2）的用法及实例，希望对大家有些许帮助。做这之前，当然得将所有CSS选择符列出来先。
CSS选择符(CSS Selectors - CSS1 and CSS2) 类型选择符(Type Selectors) CSS1 包含选择符(Descendant Selectors) CSS1 ID选择符(ID Selectors) CSS1 类选择符(Class Selectors) CSS1 分组选择符(Grouping Selectors) CSS1 通配选择符(Universal Selectors) CSS2 子选择符(Child Selectors) CSS2 相邻选择符(Adjacent Selectors) CSS2 属性选择符(Attribute Selectors) E1[attr] CSS2 E1[attr=value] CSS2 E1[attr~=value] CSS2 E1[attr|=value] CSS2 伪类选择符(CSS Pseudo-Classes Reference) :link CSS1 :visited CSS1 :hover CSS1 :active CSS1 :focus CSS2 :first-child CSS2 :first CSS2 :left CSS2 :right CSS2 :lang CSS2 伪对象选择符(CSS Pseudo-Elements Reference) :first-letter CSS2 :first-line CSS2 :before CSS2 :after CSS2现在已经将所有的CSS选择符都列举出来了，将就对每个选择符做单独的解释和举例。对于以下的这些例子，有些只是简单的应用实例，有些还提供了对比例子，使得可以明显的看出该种选择符的使用范围和方法。
类型选择符(Type Selectors)
语法：E1 说明：有的时候我们也将它叫做标签选择符，因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符，属于CSS1选择符。 实例： div{color:#F00;} <div>这里是测试内容</div>
包含选择符(Descendant Selectors)
语法：E1 E2 说明：选择所有被E1包含的E2，这里的E1和E2即可以是html标记，也可以是class或id。目前所有主流浏览器均支持该选择符，属于CSS1选择符。 实例： div em{color:#F00;} .test em{color:#F00;} <div>这里是<em>测试</em>内容</div> <div class="test">这里是<em>测试</em>内容</div>
ID选择符(ID Selectors)
语法：#sID 说明：以DOM中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符，属于CSS1选择符。 实例： #test{color:#F00;} <div id="test">这里是测试内容</div>
类选择符(Class Selectors)
语法：.className 说明：其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className)，其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符，属于CSS1选择符。 实例： .test{color:#F00;} .test2{font-size:14px;} <div id="test">这里是测试内容</div> <div id="test test2">这里是测试内容</div>
分组选择符(Grouping Selectors)
语法：E1,E2,E3 说明：将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符，属于CSS1选择符。 实例： .test,p{color:#F00;} <div id="test">这里是测试内容</div> <p>这里是测试内容</p>
通配选择符(Universal Selectors)
语法：* 说明：选定DOM中的所有对象。目前所有主流浏览器均支持该选择符，属于CSS2选择符。 实例： *{color:#F00;} <div>这里是测试内容</div> <p>这里是测试内容</p>
子选择符(Child Selectors)
语法：E1 > E2 说明：选择所有作为E1子对象的E2，不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。 实例： .test > strong{color:#F00;} <div class="test"> <strong>测试的内容</strong> <p>这是<strong>测试的内容</strong>哦！</p> <strong>测试的内容</strong> </div>
相邻选择符(Adjacent Selectors)
语法：E1+ E2 说明：选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。 实例： p + p{color:#F00;} <p>测试的内容1</p> <p>测试的内容2</p> <div>测试的内容3</div> <p>测试的内容4</p> <p>测试的内容5</p> <div><p>测试的内容6</p></div>
属性选择符(Attribute Selectors)
语法：（属性选择符具体再分为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 title="测试的内容">测试的内容</div> div[class=a]{color:#f00;} <div class="a">测试的内容</div> <div class="a b">测试的内容</div> div[class~=a]{color:#f00;} <div class="a">测试的内容</div> <div class="a b">测试的内容</div> div[title|=a]{color:#f00;} <div title="a">测试的内容</div> <div title="a b c">测试的内容</div> <div title="a-b-c">测试的内容</div>
伪类选择符(CSS Pseudo-Classes Reference)
语法：（伪类选择符共有10种） 1. Selector:link{ sRules } 2. Selector:visited{ sRules } 3. Selector:hover{ sRules } 4. Selector:active{ sRules } 5. Selector:focus{ sRules } 6. Selector1 Selector2: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. [email protected]age规则。 8. 设置页面容器位于装订线左边的所有页面使用的样[email protected] [email protected]�[email protected]特殊语言的内容样式表属性。 :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;} <a href="http://blog.doyoe.com/">css探索之旅</a> input:focus,a:focus{background:#f00;} <a href="http://blog.doyoe.com/">css探索之旅</a> <input type="text" /> div em:first-child{color:#f00;} <div><em>web</em>前端开发<em>权威指南</em></div>
伪对象选择符(CSS Pseudo-Elements Reference)
语法：（伪对象选择符共有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>我是一只丑小鸭，伊啊伊啊哟</div> div:first-line {color:#f00;} <div>我是一只丑小鸭，伊啊伊啊哟</div> div:before {content:"web";} <div>前端开发</div> div:after {content:"...";} <div>大段的文字</div>
待修改完善。。。
来源：爱蒂网
