1.3.1　CSS選擇器入門

CSS代碼的語法規則主要由兩部分構成：選擇器和聲明語句。

聲明語句用來定義樣式，而選擇器則用來指定要使用當前樣式的HTML元素。在CSS中，基本的選擇器有通用選擇器、標簽選擇器、類選擇器和id選擇器。

1．通用選擇器

使用“*”來定義通用選擇器，通用選擇器的意義是對所有元素生效。創建一個名為selector.html的文件，在其中編寫如下示例代碼：

運行代碼，瀏覽器渲染效果如圖1-9所示。

圖1-9　HTML渲染效果

如以上代碼所示，使用通用選擇器將HTML文檔中的所有元素選中，之后將其內所有的文本字體都設置為粗體18號。

2．標簽選擇器

標簽選擇器，顧名思義，我們可以通過標簽名對此標簽對應的所有元素的樣式進行設置。示例代碼如下：

上面的代碼將所有p標簽內部的文本顏色設置為紅色。

3．類選擇器

類選擇器需要集合標簽的class屬性進行使用，我們可以在標簽中添加class屬性來為其設置一個類名，類選擇器會將所有設置對應類名的元素選中，類選擇器的使用格式為“.className”。

4．id選擇器

id選擇器和類選擇器類似，id選擇器會通過標簽的id屬性進行選擇，其使用格式為“#idName”。

示例如下：

運行上面的代碼，可以看到“段落一”的文本被渲染成了紅色，“段落二”的文本被渲染成了綠色，“段落三”的文本被渲染成了藍色。

除了上面列舉的4種CSS基本選擇器外，CSS選擇器還支持組合和嵌套，例如我們要選中如下代碼中的p：

     <div><p>div中嵌套的p</p></div>

可以使用后代選擇器：

對于要同時選中多種元素的場景，我們也可以將各種選擇器進行組合，每種選擇器間使用逗號分隔即可，例如：

此外，CSS選擇器還有屬性選擇器、偽類選擇器等，有興趣的讀者可以在互聯網上查到大量的相關資料進行學習。本節只需要掌握基礎的選擇器使用方法即可。