CSS3選擇器備忘錄



除了id選擇器和class選擇器，另還有元素選擇器、屬性選擇器、包含選擇器、子選擇器和CSS3中新增的兄弟選擇器，以下帶上ID選擇器和類選擇器一起舉例。

1.ID 選擇器（ID selector，IS）：使用 # 標識selector，語法格式：#S{...}（S爲選擇器名）。例：id爲name的標籤會匹配下面的樣式

<style>
#name{
  color:red;
}
</style>
<!--下面文字是紅色的-->
<p id="name">red text</p>

2.類選擇器（class selector，CS）：使用 . 標識selector，語法格式：.S{...}（S爲選擇器名）。例：class屬性值爲value的標籤會匹配下面的樣式

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中對齊的-->
<p class="value">center text</p>

3.元素選擇器（element selector，ES）：又叫標籤選擇器，使用標籤名作爲selector名，語法格式：S{...}（S爲選擇器名）。例：所有的p標籤都會匹配以下的樣式

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜體的-->
<p style="font-style:italic">italic text</p>

4.屬性選擇器（attribute selector，AS）：ES其實是AS的一個特例，在AS基礎上還能對selector描述得更具體，語法格式爲 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是並沒有得到所有瀏覽器支持的選擇器，因此不舉例

5.包含選擇器（package selector，PS）：指定目標選擇器必須處在某個選擇器對應的元素內部，語法格式：A B{...}（A、B爲HTML元素/標籤，表示對處於A中的B標籤有效）。例：以下div內的p標籤和div外的p標籤分別匹配不同的樣式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是紅色的-->
<div>
  <p>yellow text</p><!--文字是黃色的-->
</div>

6.子選擇器（sub-selector，SS）：類似於PS，指定目標選擇器必須處在某個選擇器對應的元素內部，兩者區別在於PS允許"子標籤"甚至"孫子標籤"及嵌套更深的標籤匹配相應的樣式，而SS強制指定目標選擇器作爲 包含選擇器對應的標籤 內部的標籤，語法格式：A>B{...}（A、B爲HTML元素/標籤）。例：以下div內的p標籤匹配樣式，div內的table內的p不匹配

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是紅色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非紅色的-->
      </td>
    </tr>
  </table>
</div>

7.兄弟選擇器（brother selector，BS）：BS是CSS3.0新增的一個選擇器，語法格式：A~B{...}（A、B爲HTML元素/標籤，表示A標籤匹配selector的A，B標籤匹配selector的B時，B標籤匹配樣式）

<style>
div~p{
  color:red;
}
</style>
<div>
  <br>no red text</p><!--文字是非紅色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是紅色的-->
</div>