CSS選擇器種類及及其使用介紹

2024-07-11 08:27:58

字體：大中小

來源：轉載

供稿：網友

首先說主要都有哪些先擇器

1.標簽選擇器（如：body,div,p,ul,li）

2.類選擇器（如：class="head",class="head_logo"）

3.ID選擇器（如：id="name",id="name_txt"）

4.全局選擇器（如：*號）

5.組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開）

6.繼承選擇器（如：div p,注意兩選擇器用空格鍵分開）

7.偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）

8.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

在標簽內寫入style=" "的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。

我們分別來看下這些選擇器：

1：標簽名選擇器

一個XHTML文檔中有許多標簽，例如p標簽，h1標簽等。若要使文檔中的所有p標簽都使用同一個CSS樣式，就應使用標簽選擇器。

復制代碼

代碼如下:
div {color:red;border:1px blue solid;}
p {color:#000;}

2：類選擇器

使用標簽選擇器可以為整個XHTML文檔中的同一個標簽指定相同的CSS樣式。但是在實際運用中，XHTML文檔中的同一個標簽會被反復使用。若要為相同的標簽賦予不同的CSS樣式就應使用類選擇器。

復制代碼

代碼如下:
<div class="test">測試代碼</div>
.test {color:red;border:1px blue solid;}

在html文檔里，我們在要控制樣式的標簽的開標簽（非成對標簽如input直接放在標簽里）里加入 class="xxx",在頁面對應的css文件里，用.xxx就可以指向這個標簽，從而對這個標簽進行控制，我們稱這種通過定義類（class）來找到標簽的方式為：類選擇器。

這種定義class 的方式是前端開發最常用的選擇器，有幾個突出的特點：可以給不同的標簽設置同一個類，從而用一條CSS命令控制幾個標簽，減少大量代碼，是頁面修改簡單，易維護，易改版；其次，后臺工作人員機會不會用到有關class的相關設置，不需要跟后臺人員之間進行交互；再者，可以通過js等動態改變標簽的Classname，從而改變整個標簽的樣式，使前端動態效果實現起來更為容易。

3：ID選擇器

ID選擇器和類選擇器相似，不同的是，ID選擇器不能復用。在一個XHTML文檔中，一個ID選擇器只能把其CSS樣式指定給一個標簽。

復制代碼

代碼如下:
<div id="test">測試代碼</div>
#test {color:red;border:1px blue solid;}

有 ID 的 HTML元素可以被JavaScript來操縱.再就是ID也是后臺開發人員會經常用的，所以前端開發人員應該盡量少的使用。

上一篇：html引入css四種引入方式示例分享

下一篇：css實現tab效果仿163郵箱樣式