1. 空格 —— “后代选择器”
例如下面这个例子，表示div元素里面所有的p元素
div p {
...
}
2. > —— “子选择器”
例如下面这个例子，表示div元素里面所有的子代（不含孙代及以后）p元素
div>p {
...
}
3. ~ —— “兄弟元素选择器”
例如下面这个例子，表示.cls元素往后的同级的p元素
.cls~p {
...
}
4. + —— "相邻兄弟选择器"
例如下面这个例子，表示.cls元素往后的一个同级元素(并且要求这个元素是p元素)
.cls~p {
...
}
5. || —— “列选择器” （浏览器还没实现）
例如下面这个例子，表示.aaa列的所有td元素
<style>
.aaa || td {
background: red;
}
</style>
<table width="100%" border="1">
<col class="aaa" align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>