CSS教程 CSS選擇器

2024-07-11 08:26:55

字體：大中小

來源：轉載

供稿：網友

上節課我們講了一下CSS通過什么方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式，大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。

CSS選擇器共有三種：標簽選擇器、ID選擇器、類選擇器。
為了后面的對選擇器的解釋更容易理解，在這里先打個比喻，如果把你所處的環境視為HTML頁面的話，環境里的每一個人則相當于HTML頁面內標簽元素，每個人都有一個ID(身份證)，那么html中的每一個標簽也都有自己的ID，大家都知道ID是唯一的，不可能重復。

【標簽選擇器】
一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽采用相應的CSS樣式，(在大環境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：

復制代碼

代碼如下:
p{
font-size:12px;
background:#900;
color:090;
}

則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護中，如果想改變整個網站中p標簽背景的顏色，只需要修改background屬性就可以了，就這么容易！

【ID選擇器】
ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面么，所以建議大家不要在同一個html頁面中多個標簽擁有共同的ID)，就像在你所處的環境中，你只有一個ID(身份證)，不可能重復！相信大家也能看出來，ID選擇器更具有針對性，如：
先給某個HTML頁面中的某個p標簽起個ID，代碼如下：
<p id="one">此處為p標簽內的文字</p>
在CSS中定義ID為one的p標簽的屬性，就需要用到#，代碼如下：

復制代碼

代碼如下:
#one{
font-size:12px;
background:#900;
color:090;
}

這樣頁面中的某個p就會是CSS中定義的樣式。

【類選擇器】
這種選擇器更容易理解了，就是使頁面中的某些標簽(可以是不同的標簽)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎么做呢~呵呵，和ID選擇器的用法類似，只不過把id換做class，如下：

上一篇：css 浮動(float)頁面布局(下)

下一篇：css 浮動(float)頁面布局