如何理解CSS中的類型選擇器和ID選擇器以及class選擇器

這期內容當中小編將會給大家帶來有關如何理解CSS中的類型選擇器和ID選擇器以及類選擇器，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

類型選擇器
類型選擇器，是以html元素類型作為選擇條件。
網頁元素：在CSS教程中，對于如“<p></p>”、“<h4></h4>”這些不再稱呼為標簽，而統一稱呼為網頁元素。
在網頁元素中，都可以按類型進行區分，其類型可以作為CSS的選擇符，如“<a></a>”、“<ul></ul>”、“<div></div>”等，對應的選擇器分別為“a”、“ul”、“div”。
例子：

CSS Code復制內容到剪貼板

1. a{   

2.     text-decoration: none;   

3. }  

該例子表示網頁上所有的超鏈接取消下劃線。

ID選擇器
CSS ID選擇器允許選擇網頁元素的ID進行樣式表應用。
ID選擇器以“#”標識，后面緊跟html元素id名稱。
html代碼如下：

XML/HTML Code復制內容到剪貼板

1. <div id="nav"><!--nav start-->  

2.   <h3><a href="index.html">首頁</a></h3>  

3.   <h3><a href="blog.html">博客</a></h3>  

4.   <h3><a href="guestbook.html">留言板</a></h3>  

5. </div><!--nav end-->  

在該html代碼如中，有一個id="nav"的DIV網頁元素。使用ID選擇器對該元素進行樣式表應用：

CSS Code復制內容到剪貼板

1. #nav {   

2.     font-size: 14px;   

3.     width: 500px;   

4. }  

該CSS樣式表示id為nav的網頁元素，其寬度為500px，其內文字大小為14px。

類(class)選擇器
CSS 類選擇器允許選擇網頁元素的類進行樣式表應用。
類選擇器以 . 符號標識，后面緊跟類名稱。
一個類選擇器例子：

CSS Code復制內容到剪貼板

1. .catlist {   

2.     color: #d51300;   

3. }  

該 CSS 樣式表示網頁中 class="catlist" 的網頁元素，其文字顏色為 #d51300 。
在 html 中應用類選擇器
要在 html 代碼中應用一個類(class)樣式，只需在標簽內使用 class 屬性，取值為類名。
html 代碼例子：

XML/HTML Code復制內容到剪貼板

1. <h4>文章分類</h4>  

2. <ul class="catlist">  

3.   <li>情感世界</li>  

4.   <li>技術文章</li>  

5.   <li>網絡文摘</li>  

6.   <li>其他</li>  

7. </ul>  

在該 html 代碼如中，<ul></ul>內包含的文字顏色都被渲染為 #d51300 顏色。當然，也可以再為其中的一個或一些 <li></li> 元素單獨定義另外的樣式。
提示
如上例所示，只要網頁元素類名為 catlist ，都將受到該樣式表的影響，而不管它具體是何種類型的網頁元素。
類選擇器會作用于所有類名相同的網頁元素，有復用效果，這個是和 ID 選擇器的區別。
類名的第一個字符不能使用數字，它無法在 Mozilla 或 Firefox 瀏覽器中起作用。

上述就是小編為大家分享的如何理解CSS中的類型選擇器和ID選擇器以及類選擇器了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。