包含选择器

　　包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下： 

Selector1 Selector2 {...} /* 其中Selector1、Selector2都是有效的选择器 */
例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>包含选择器测试</title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div .a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>  
<body>  
<div>没有任何属性的div元素</div>  
<div><section><div class="a">处于div之内且class属性为a的元素</div></section></div>  
<p class="a">没有处于div之内、但class属性为a的元素</p>  
</body>  
</html>

子选择器

　　子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下： 

Selector1>Sector2 {...} /* 其中Selector1、Selector2 都是有效的选择器 */

　　包含选择器与子选择器有点相似，它们之间存在如下区别：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其“孙子元素”也可；对于子选择器，要求目标选择器必须作为外部选择器对应的元素的直接子元素才行。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 子选择器 </title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div>.a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>  
<body>  
<div>没有任何属性的div元素</div>  
<div><p class="a">class属性为a、且是div子节点的元素</p></div>  
<div><section><p class="a">class属性为a、且处于div内部的元素</p></section></div>  
</body>  
</html>

CSS 3新增的兄弟选择器

　　兄弟选择器是CSS 3.0新增的一个选择器。兄弟选择器的语法如下： 

Selector1 ~ Selector2 {...} /* 其中Selector1、Selector2都是有效的选择器 */

　　兄弟选择器匹配与Selector1对应的元素后面、能匹配Selector2的兄弟节点。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> E~F伪类选择器 </title>
    <style type="text/css">
        /* 匹配id为android的元素后面、class属性为long的兄弟节点 */
        #android ~ .long{
            background-color: #00FF00;
        }
    </style>
</head>  
<body>  
<div>  
    <div>疯狂Java讲义</div>
    <div class="long">轻量级Java EE企业应用实战</div>
    <div id="android">疯狂Android讲义</div>
    <p class="long">经典Java EE企业应用实战</p>
    <div class="long">JavaScript权威指南</div>
</div>  
</body>  
</html>

选择器组合

　　有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用选择器组合来实现了。选择器组合的语法格式如下： 

Selector1,Selector2,Selector3,...{...} /*其中Selector1、Selector2、Selector3都是有效的选择器*/

　　对于组合选择器而言，{}中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 选择器组合 </title>
    <style type="text/css">
    /* div元素、class属性为a的元素、id为abc的元素都起作用的CSS样式 */
    div,.a,#abc {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>  
<body>  
<div>没有任何属性的div元素</div>  
<p class="a">class属性为a的元素</p>  
<section id="abc">id为abc的元素</section>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。