css類別選擇器的使用方法詳解_CSS/HTML

類別選擇器
在CSS 中，類別選擇器以點號顯示：

複製程式碼 程式碼如下:

    .center {text-align: center}
 

在上面的例子中，所有擁有center 類別的HTML 元素均為居中。
在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類別。這意味著兩者都將遵守 ".center" 選擇器中的規則。

複製程式碼 程式碼如下:

   

    This heading will be center-aligned
   

   

 
注意：類別名稱的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
和id 一樣，class 也可用作為衍生選擇器：

複製程式碼 程式碼如下:

    .fancy td {
        color: #f60;
        background: #666;
       的較大的元素內部的表格單元都會以灰色背景顯示橘色文字。 （名為fancy 的更大的元素可能是一個表格或一個div）
元素也可以基於它們的類別而被選擇：

複製程式碼 程式碼如下:

    td.fancy {
        color: #f60;
     >
在上面的範例中，類別名稱為fancy 的表格單元將是帶有灰色背景的橘色。

複製程式碼 程式碼如下:

   
 

多類別選擇器

1、在 HTML 中，一個 class 值中可能包含一個字列表，各個字之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作（這兩個字的順序無關緊要，寫成warning important 也可以）：

複製程式碼 程式碼如下:

This paragraph is a very important warning.

我們假設class 為important 的所有元素都是粗體，而class 為warning 的所有元素為斜體，class 中同時包含important 和warning 的所有元素還有一個銀色的背景。就可以寫：

複製程式碼 程式碼如下:

.important {font-weight: bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}
 

2、透過把兩個類別選擇器連結在一起，僅可選擇同時包含這些類別名稱的元素（類別名稱的順序不限）。
如果一個多類別選擇器包含類別名稱清單中沒有的一個類別名，則匹配就會失敗。請看下面的規則：

複製程式碼 程式碼如下:

.important.urgent { background:silver;}

不出所料，這個選擇器只會符合class 屬性中包含詞important 和urgent 的p 元素。因此，如果一個 p 元素的 class 屬性中只有單字 important 和 warning，將無法相符。不過，它能符合以下元素：

複製程式碼 程式碼如下:

This paragraph is a very important and urgent warning.