实例:
.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选择符。










