4.2 CSS选择器（2）――类选择器与包含选择器
2008年4月30日
- 4.2 CSS选择器（1）――通配选择器、类型选择器与ID选择器
- 4.2 CSS选择器（2）――类选择器与包含选择器
- 4.2 CSS选择器（3）――子元素选择器和相邻兄弟选择器
- 4.2 CSS选择器（4）——属性选择器（Attribute Selectors）
4.2.4 类选择器（Class Selectors）
图4-4 类选择器
类选择器的定义如图4-4所示。
类选择器和ID选择器很像，是通过为(X)HTML元素添加class属性而生效的，可应用在<body>内的任何元素上，不过类选择器是可重复的。例如：
<div class="warning">注意！</div> <p class="warning">注意！</p> <p>这里要<span class="warning">注意！</span></p>
也可以针对不同类型的元素对同一个名称的类选择器设定不同的样式规则，例如对上面的XHTML代码，可以设定CSS规则如下，其在浏览器内的显示如图4-5所示。
div.warning { color: red; }
p.warning { color: blue; }
span.warning { color: yellow; }
图4-5 针对不同元素定义类选择器的显示效果
由图4-5读者可以发现，类选择器的定义非常灵活，即使是相同名称的类选择器，也可以有不同的表现。
同一个元素可以设定多个类，之间用空格分开，如下所示：
<div class="menu main sample">一个元素可以设定多个clss属性</div>
这几个类的样式会同时作用于该元素，如果其中有重复定义的规则，则按照“特殊性”的规定来决定如何显示。
提示：关于选择器的特殊性，请参见本章[4.6 层叠]一节。
4.2.5 包含选择器（Descendant Selectors）
图4-6包含选择器
包含选择器，也称“后代选择器”，其定义规则如图4-6所示。
包含选择器的运作原理是建立在文档结构树的基础上，上述规则的含义是“E1元素内包含的所有E2元素”，或者“E1元素后代中的所有E2元素”。例如有XHTML如下，其在浏览器内的效果如图4-7所示。
div em {
color: blue;
}
<div>div中的<em>em</em>。 <p>div中的p中的<em>em</em></p> </div> <p>与div同级的p中的<em>em</em>。</p>
图4-7 使用包含选择器定义CSS的显示效果
利用包含选择器来定义：
div em {……}
只对<div>中所有后代<em>元素生效，而没有包含在<div>中的<p>中的<em>不受影响。
包含选择器可以有多层，例如：
div p a { …… } /* <div>中的<p>中的<a> */
#logo li em a { …… } /* ID为logo的元素中的<li>中的<em>中的<a> */
#main p.warning strong { …… } /* ID为main的元素中的应用了warning 类的<p>中的<strong> */
包含选择器和文档结构关系非常密切，例如有如下XHTML结构：
<div id="test">
<ul>
<li>ul中的li</li>
<li>ul中的li</li>
</ul>
<ol>
<li>ol中的li</li>
<li>ol中的li</li>
</ol>
</div>
此时，如果定义CSS：
#test li {
color: red;
}
则会匹配“text”层内所有的<li>，而如果如下定义CSS：
#test ul li {
color: blue;
}
只匹配<ul>中的<li>，对于<ol>中的<li>则没有影响。
同样的，如果如下定义CSS：
#test ol li {
color: yellow;
}
则只匹配<ol>中的<li>，对于<ul>中的<li>则没有影响。
- 4.2 CSS选择器（1）――通配选择器、类型选择器与ID选择器
- 4.2 CSS选择器（2）――类选择器与包含选择器
- 4.2 CSS选择器（3）――子元素选择器和相邻兄弟选择器
- 4.2 CSS选择器（4）——属性选择器（Attribute Selectors）
