CSS選擇器

目錄

一、元素選擇器

二、id選擇器（#  id）

三、類選擇器（.  class）

四、屬性選擇器

一、元素選擇器

選擇器通常将是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
           

二、id選擇器（#  id）

id 選擇器以 "#" 來定義。

示例：下面兩個 id 選擇器，第一個可以定義元素的顔色為紅色，第二個定義元素的顔色為綠色

#red {color:red;}

#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p> 

<p id="green">這個段落是綠色。</p>

注意：id 屬性隻能在每個 HTML 文檔中出現一次。

三、類選擇器（.  class）

類選擇器以一個點号顯示：

示例：定義擁有 center 類的 HTML 元素均為居中。

.center {text-align: center}

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着兩者都将遵守 ".center" 選擇器中的規則。

<h1 class="center">

    This heading will be center-aligned

</h1>

<p class="center">

    This paragraph will also be center-aligned.

</p>

補充1：元素也可以基于它們的類而被選擇

td.fancy {

    color: blue;

    background: green;

}

在上面的例子中，類名為 fancy 的表格單元将是帶有綠色背景的藍色。

<td class="fancy">

可以将類 fancy 配置設定給任何一個表格元素任意多的次數。（這點與id選擇器不同）

補充2：CSS 多類選擇器

在 HTML 中，一個 class 值中可能包含多個詞，各個詞之間用空格分隔。

.important {font-weight:bold;}    //加粗

.warning {font-style:italic;}    //斜體

.important.warning {background:silver;}    //背景色

<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">This paragraph is a very important warning.</p>

效果如下：

四、屬性選擇器

對帶有指定屬性的 HTML 元素設定樣式，不僅限于 class 和 id 屬性。

(1) 屬性選擇器

示例：為帶有 title 屬性的所有元素設定樣式：

[title] { color:red; }

<h2 title="Hello world">Hello world</h2>

(2) 屬性和值選擇器

[title=Hello] {border:5px solid blue;}

<h2 title="Hello>Hello world</h2>

(3) 屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。适用于由空格分隔的屬性值：

[title~=hello] { color:red; }

<h2 title="hello world">Hello world</h2>

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。适用于由連字元分隔的屬性值：

[lang|=en] { color:red; }

<p >Hi!</p>

(4) 設定表單的樣式

屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特别有用：

input[type="text"]

{

  width:150px;

  background-color:yellow;

}

input[type="button"]

{

  width:120px;

  margin-left:35px;

}

<input type="text" name="Name" value="Gates" size="20">

<input type="button" value="Example Button">