淺析CSS的選擇器基礎語法規則和工作原理

茆榮海

【摘 要】層疊樣式表（CSS）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言，選擇器是CSS語法中最基本概念。本文淺析了CSS中選擇器的基礎語法規則和工作原理。

【關鍵詞】CSS 選擇器 基礎語法規則 工作原理

一、引言

CSS是層疊樣式表（Cascading Style Sheets）的縮寫，用于定義HTML元素的顯示形式，是W3C推出的格式化網頁內容的標準技術，是網頁設計者必須掌握的技術之一。在HTML文檔中加入CSS樣式表可分為嵌入式樣式表、外部樣式表和內聯樣式表三種，在同一文檔內可以同時使用三種方法。

二、CSS選擇器的基礎語法規則

選擇器是CSS語法中最重要最基本的概念。使用選擇器可以指定XHTML文檔中特定標簽應用CSS樣式。選擇器有許多類型，包括標簽選擇器、類選擇器、ID選擇器、全局選擇器、組合選擇器、繼承選擇器和偽類選擇器等。

（一）標簽選擇器。一個XHTML文檔中有許多標簽，例如p標簽、h1標簽等。若要使文檔中的所有p標簽都使用同一個CSS樣式，就應使用標簽選擇器。如代碼“h1 {color：red； font-size：14px；}”，這行代碼的作用是將 h1元素內的文字顏色定義為紅色，同時將字體大小設置為14像素。在這個例子中，h1是選擇器，color和 font-size是屬性，red和14px是值。標簽選擇器可以直接改變該標簽的所有樣式。

（二）類選擇器。使用標簽選擇器可以為整個XHTML文檔中的同一個標簽指定相同的CSS樣式，但是在實際運用中，XHTML文檔中的同一個標簽會被反復使用，若要為相同的標簽賦予不同的CSS樣式就應使用類選擇器。以下是使用類選擇器定義CSS樣式的步驟：（1）編寫合適的類選擇器名，然后定義CSS樣式聲明，例如定義類選擇器名為news的CSS樣式代碼.news{ font-size：20px；color：green }。（2）把以news為名的CSS樣式應用到XHTML某個指定的標簽中。將news樣式指定給標簽的方法如下：新聞，其中，在

中寫入class=“news”的語句。Class和等號都是固定的寫法，在雙引號中寫入類選擇器的名稱。

（三）ID選擇器。ID選擇器和類選擇器相似，不同的是，ID選擇器不能復用。在一個XHTML文檔中，一個ID選擇器只能把其CSS樣式指定給一個標簽。以下是使用ID選擇器定義CSS樣式的步驟：（1）編寫合適的類選擇器名，然后定義CSS樣式聲明，以下是定義類選擇器名為special的CSS樣式代碼：#special{ font-size：20px；color：green }。（2）把以special為名的CSS樣式應用到XHTML某個指定的標簽中。將news樣式指定給標簽的方法如下：