css 選擇器符號

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>