淺析CSS的選擇器基礎(chǔ)語法規(guī)則和工作原理

茆榮海

【摘 要】層疊樣式表（CSS）是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言，選擇器是CSS語法中最基本概念。本文淺析了CSS中選擇器的基礎(chǔ)語法規(guī)則和工作原理。

【關(guān)鍵詞】CSS 選擇器 基礎(chǔ)語法規(guī)則 工作原理

一、引言

CSS是層疊樣式表（Cascading Style Sheets）的縮寫，用于定義HTML元素的顯示形式，是W3C推出的格式化網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)技術(shù)，是網(wǎng)頁設(shè)計(jì)者必須掌握的技術(shù)之一。在HTML文檔中加入CSS樣式表可分為嵌入式樣式表、外部樣式表和內(nèi)聯(lián)樣式表三種，在同一文檔內(nèi)可以同時(shí)使用三種方法。

二、CSS選擇器的基礎(chǔ)語法規(guī)則

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

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

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

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

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