2. 程式人生 > >CSS中的ID選擇器和類選擇器區別及用法

CSS中的ID選擇器和類選擇器區別及用法

阿新 • • 發佈：2018-12-26

W3C標準這樣規定的，

其一：在同一個頁面內，

不允許有相同名字的id物件出現，

但是允許相同名字的class

其二：當頁面中用到js或者要動態呼叫物件的時候，要用到id

 控制頁面總共有四種方式行內方式、內嵌方式、連結方式、匯入方式， 通過這四種

方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素

實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元

素就是通過CSS選擇器進行控制的。

CSS選擇器共有三種：標籤選擇器、ID選擇器、類選擇器。

為了後面的對選擇器的解釋更容易理解，在這裡先打個比喻，如果把你所處的環境

視為HTML頁面的話，環境裡的每一個人則相當於HTML頁面內標籤元素，每個人都有

一個ID(身份證)，那麼html中的每一個標籤也都有自己的ID，大家都知道ID是唯一

的，不可能重複。

【標籤選擇器】

一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤

採用相應的CSS樣式，(在大環境中你可能出於不同的位置，但是不管怎麼樣，你總

是穿著同一套衣服，這件衣服就是由標籤選擇器事先給你限定好的，不管走到哪裡

都是這身衣服)比如，在style.css檔案中對p標籤樣式的宣告如下：

  1. p{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }

複製程式碼

則頁面中所有p標籤的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)

，這在後期維護中，如果想改變整個網站中p標籤背景的顏色，只需要修改

background屬性就可以了，就這麼容易！

【ID選擇器】

ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合

W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面麼

，所以建議大家不要在同一個html頁面中多個標籤擁有共同的ID)，就像在你所處的

環境中，你只有一個ID(身份證)，不可能重複！相信大家也能看出來，ID選擇器更

具有針對性，如：

先給某個HTML頁面中的某個p標籤起個ID，程式碼如下：

  1. <pid="one">此處為p標籤內的文字</p>

複製程式碼

在CSS中定義ID為one的p標籤的屬性，就需要用到#，程式碼如下：

  1. #one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }

複製程式碼

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

【類選擇器】

這種選擇器更容易理解了，就是使頁面中的某些標籤(可以是不同的標籤)具有相同

的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉

花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎麼做呢~呵呵，和

ID選擇器的用法類似，只不過把id換做class，如下：

  1. <pclass="one">此處為p標籤內的文字</p>

複製程式碼

如果我還想讓div標籤也有相同的樣式，怎麼辦呢？加上同樣的class就可以了，如

下

  1. <divclass="one">此處為p標籤內的文字</div>

複製程式碼

這樣頁面中凡是加上class="one"的標籤，樣式都是一樣的嘍~

CSS定義的時候和ID選擇器差不多，只不過把#換成.，如下

  1. .one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }

複製程式碼

補充:一個標籤可以有多個類選擇器的值，不同的值用空格分開，如：

  1. <div class="one yellowleftStyle">此處為p標籤內的文字</div>

複製程式碼

這樣我們可以將多個樣式用到同一個標籤中，當然也可以，ID和class一塊用

  1. <div id="div1" class="one yellowleftStyle">此處為p標籤內的文字
  2. </div>

複製程式碼

【通用選擇器】

到這裡，前三種基本的選擇器說完了，但是還需要給大家介紹一個CSS選擇器中功能最強大但是用的最少的一種選擇器“通用選擇器”

  1. *{此處為CSS程式碼}

複製程式碼

強大之處是因為他對父級中的所有HTML標籤進行樣式定義，可對具有共同樣式的標籤樣式進行定義(有點小學數學中的提取公因式)，這樣可以大大精簡程式碼；既然有這麼強大的功能為什麼是用的最少呢，同樣還是因為他的強大，他是對父級元素內的所有標籤進行定義，所以只要你定義了，那麼父級裡面的所有的標籤，甭管有沒有必要，也都相當於加上了通用選擇器裡面的程式碼了，能這麼說大家不能夠完全理解，沒關係，我給大家舉個例子，請看下面

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
  5. <title>無標題文件</title>
  6. <style type="text/css">
  7. <!--
  8. #div1 *{
  9. background:#eee;
  10. color:#333;
  11. }
  12. -->
  13. </style>
  14. </head>
  15. <body>
  16. <div id="div1">
  17. <p>這裡是p標籤區域</p>
  18. <div>這裡是a標籤區域</div>
  19. </div>
  20. <div id="div2">
  21. <p>這裡是p標籤區域</p>
  22. <div>這裡是a標籤區域</div>
  23. </div>
  24. </body>
  25. </html>

複製程式碼

大家執行一下上面的例子，div1裡面的兩個標籤是不是樣式一樣，這就是通用選擇器的強大之處，不管裡面有多少個標籤都會將樣式加到所有標籤內，如果div1裡面得所有的標籤都有一部分相同的CSS程式碼，那麼可以把這部分程式碼提取出來，用通用選擇器來定義，這樣可以大大縮減程式碼，但是如果div1裡面只要有一個和其他元素沒有相同的程式碼，就不能用通用選擇器來定義，這也就是CSS通用選擇器不靈活的一點。現在大家明白為什麼通用選擇器是選擇器裡面功能最強大的但又是用的最少的選擇器了吧~~呵呵

對於通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠相容多種瀏覽器，所以要對HTML內的所有的標籤進行重置，會將下面的程式碼加到CSS檔案的最頂端

  1. *{margin:0; padding:0;}

複製程式碼

為什麼要這麼用呢，因為每種瀏覽器都自帶有CSS檔案，如果一個頁面在瀏覽器載入頁面後，發現沒有CSS檔案，那麼瀏覽器就會自動呼叫它本身自帶的CSS檔案，但是不同的瀏覽器自帶的CSS檔案又都不一樣，對不同標籤定義的樣式不一樣，如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的，那麼我們就需要對對HTML標籤重置，就是上面的程式碼了，但是這樣也有不好的地方，因為HTML4.01中有89個標籤，所以相當於在頁面載入CSS的時候，先對這89個標籤都加上了{margin:0;padding:0;}，在這裡我不建議大家這麼做，因為89個標籤中需要重置的標籤是很少數，沒有必要將所有的標籤都重置，需要哪些標籤重置就讓哪些標籤重置就可以了，如下

  1. body,div,p,a,ul,li{margin:0; padding:0;}

複製程式碼

如果還需要dl、dt、dd標籤重置，那就在上面加上就可以了，如下

  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

複製程式碼

用到那些就寫那些，這點也可以看做衡量頁面重構師製作頁面水平的高低，以及是否專業的一個方面

到這裡大家更應該明白這句話“通用選擇器是功能最強大但是用的最少的選擇器”了吧~^_^

OK！選擇器的內容我向大家應該都明白了，後面就繼續講解一下“選擇器的集體聲

明”和“選擇器的巢狀”

【選擇器的集體宣告】

在我們使用選擇器的時候，有些標籤樣式是一樣的，或者某些標籤都有共同的樣式

屬性，我們可以將這些標籤集體宣告，不同的標籤用“,”分開，比如：

  1. h1,h2,h3,h4,h5,h6{color:#900;}

複製程式碼

  1. #one,#three,.yellow{font-size:14px;}
  2. #one{background:#ccc;}
  3. #three{background:#ccc;}
  4. .yellow{background:#ccc;}

複製程式碼

和小學的提取公因式差不多，把共同的部分提取出來，這麼做的好處，相同的部分

共同定義，不同的部分單獨定義，保證風格統一，樣式修改靈活，這也是優化CSS代

碼的一塊，要記住喲~

【選擇器的巢狀】

選擇器也是可以巢狀的，如：

  1. #div1 p a{color:#900;}

複製程式碼

這樣的好處就是不需要在單獨的為ID為div1的標籤內的p標籤內的a標籤單獨定義

class選擇器或者ID選擇器，CSS程式碼不就少了嘛~同樣也是CSS程式碼優化的一塊。

到這裡，基本的選擇器說完了，但是還需要給大家介紹一個“通用選擇器”

  1. *{此處為CSS程式碼}

複製程式碼

 【三種CSS程式碼選擇器、選擇器的宣告、選擇器的巢狀三塊知識】

相關推薦

CSS中的id選擇器和類選擇器的用法

這幾天正在學習html+css+js 下面是今天學習的一個小例項，但是不是很瞭解這幾種語言，所以在選擇器上出現了一些錯誤。 以下是記錄 <!DOCTYPE html> <ht

CSS中的ID選擇器和類選擇器區別及用法

W3C標準這樣規定的， 其一：在同一個頁面內， 不允許有相同名字的id物件出現， 但是允許相同名字的class 其二：當頁面中用到js或者要動態呼叫物件的時候，要用到id  控制頁面總共有四種方式行內方式、內嵌方式、連結方式、匯入方式， 通過這四種 方式就可以實現CSS對HTML頁面樣式的控制，如果要讓

CSS 選擇器中，元素選擇器和類選擇器的區別是什麼？

元素選擇器是最常見的 CSS 選擇器，即，文件的元素就是最基本的選擇器。選擇器通常是某個 HTML 元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。 類選擇器用於將樣式

css id選擇器和類選擇器使用雜談

以下來自廣大網友的觀點，我也覺得有道理 其實自己一直糾結這個問題，現在可以不糾結了 1.結果沒有區別，形式上有區別，建議用class ，如果你好幾個模組都是一樣的css，用id就不合適了 2.js的時候document.getelementbyid('')時就會體現出來。

[html5入門-2]html5選擇器之標籤選擇器，id選擇器和類選擇器

標籤選擇器，id選擇器和類選擇器為html5三種常用的選擇器 一.標籤選擇器 語法： 標籤名{ css樣式1； css樣式2；  ...... } 舉例說明，使用標籤選擇器建立分別建立一個div標籤和一個p標籤，程式碼如下： <!DOCTYPE html> &l

python中的例項變數和類變數以及區別

1，例項變數 ：可以通過self點出的變數全部為例項變數。例項變數就是物件，呼叫方式：通過物件名呼叫。一個物件的值改變不影響另 外一個物件值 2，例項變數的生命週期：物件銷燬，物件執行完，物件被後面的覆蓋，例項變數就銷燬。, 3，類變數的生命週期：隨著類存在，是要類不刪除

JAVA安全管理器和類裝載器

SecurityManager相關概念理解 Java語言具有完善的安全框架，從程式語言，編譯器、解釋程式到Java虛擬機器， 都能確保Java系統不被無效的程式碼或敵對的編譯器暗中破壞，基本上，它們保證 了Java程式碼按預定的規則運作。但是，當我們需要逾越這些限制時，

述 SQL 中的 distinct 和 row_number() over() 的區別及用法

表示 第一個 字段值 格式 這樣的 操作數 col 例如 from 　　1 前言　　　　在咱們編寫 SQL 語句操作數據庫中的數據的時候，有可能會遇到一些不太爽的問題，例如對於同一字段擁有相同名稱的記錄，我們只需要顯示一條，但實際上數據庫中可能含有多條擁有相同名稱的記錄，從

JAVA中string.replace()和string.replaceAll()的區別及用法

mod btn dsm ont match cep 產生 生成 語法 乍一看，字面上理解好像replace只替換第一個出現的字符（受javascript的影響），replaceall替換所有的字符，其實大不然，只是替換的用途不一樣。 public Strin

JDBC中PreparedStatement接口提供的execute、executeQuery和executeUpdate之間的區別及用法

ica cat nvi 一個 execute ear let ace 刪除 JDBC中PreparedStatement接口提供的execute、executeQuery和executeUpdate之間的區別及用法 (2012-08-27 09:36:18) 轉載▼

SQL中distinct 和 row_number() over() 的區別及用法

1 前言 在咱們編寫 SQL 語句操作資料庫中的資料的時候，有可能會遇到一些不太爽的問題，例如對於同一欄位擁有相同名稱的記錄，我們只需要顯示一條，但實際上資料庫中可能含有多條擁有相同名稱的記錄，從而在檢索的時候，顯示多條記錄，這就有違咱們的初衷啦！因此，為了避免這種情況的發

bowtie和bowtie2使用條件區別及用法

一、轉錄組還是基因組？ map常用的工具有bowtie/bowtie2, BWA,SOAP1/SOAP2等。這個問題又會被分成兩個問題，是基因組測序（DNA-seq）還是轉錄組測序(mRNA-seq)。其中的區別是對於真核生物而言，mRNA序列與DNA序列並不完全相同，在經歷了後剪下之後，成熟的

過載(Overloads)、重寫(Overrides)和隱藏(Shadows) 的區別及用法

過載、重寫和隱藏是很容易混淆的類似概念。雖然所有這三種技術都使您得以建立同名的成員，但它們之間有一些重要的差異。 過載的成員用於提供屬性或方法的不同版本，這些版本具有相同名稱但是接受不同數量的引數或者接受不同資料型別的引數。 重寫的屬性和方法用於替換在派生類中不適合的繼承的屬性

SQLServer連接查詢之Cross Apply和Outer Apply的區別及用法

get 學生表 ref src fontsize watermark lec pre tco https://blog.csdn.net/wikey_zhang/article/details/77480118 先簡單了解下cross

SQL Server連接查詢之Cross Apply和Outer Apply的區別及用法（轉載）

簡單了解下 rtrim www weight 存儲 去掉 轉載 參考文獻 hang 先簡單了解下cross apply的語法以及會產生什麽樣的結果集吧！示例表： SELECT * FROM tableA CROSS APPLY tableB 兩張表直接

CSS中id選擇器和class選擇器

CSS中對html元素的樣式進行控制是通過CSS選擇器來完成的，最常用的兩種選擇器為id選擇器和class選擇器。id選擇器和class選擇器介紹id選擇器：用來為標有特定id的html元素指定特定的樣

css中id選擇器和class選擇器的區別？

ID選擇器： id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 "#" 來定義。 下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色

css中類選擇器和元素選擇器聯合使用分析

<html> <head> <style type="text/css"> .bb p { color:red;

CSS樣式中的後代選擇器和子代選擇器

2017年04月18日 20:36:15 枕夢 閱讀數：1903 標籤： 後代選擇器 子代選擇器

CSS子類選擇器和後代選擇器的區別

一.介紹 1.子類選擇器 子類選擇器僅僅指的是父元素的直接後代，大家可以理解為僅作用於第一代子元素，通過“>”進行選擇。 2.後代選擇器 後代選擇器則指的是作用於所有後代元素，通過空格來進行選擇。 話不多說，接下來通過程式碼給大家演示。