溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS選擇器的種類和作用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS選擇器的種類和作用”吧！
首先說主要都有哪些先擇器
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標簽，h2標簽等。若要使文檔中的所有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也是后臺開發人員會經常用的，所以前端開發人員應該盡量少的使用。
4.全局選擇器
全局選擇器是一個星號。它能作用于XHTML文檔中的所有元素。
代碼如下:
*{margin:0; padding:0;}
5.組合選擇器
標簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標簽選擇器和類選擇器組合，標簽選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣，所以只介紹標簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實際中經常使用。
比如 .orderlist li {xxxx} 或者 .tableset td {}
我們使用的時候一般用在重復出現并且樣式相同的一些標簽里，比如 li td dd等。
比如 <h2 class="red"></h2> H1.red {color: red}
群組選擇器
代碼如下:
.test1,span,test2 {border:1px blue solid;}
div,span,img {border:1px blue solid;}
群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。
6.繼承選擇器
學習使用繼承選擇器就必須先了解文檔樹和CSS的繼承。每個XHTML都可以被看作一個文檔樹，文檔樹的根部就是html標簽，而head和body標簽就是其子元素。在head和body里的其他標簽就是html標簽的孫子元素。整個XHTML就呈現一種祖先和子孫的樹狀關系。CSS的繼承是指子孫元素繼承祖先元素的某些屬性。以下通過實例來詳細講解這兩個重要的CSS概念。
文檔樹 CSS的繼承 繼承選擇器
代碼如下:
<div class="test">
<span><img src="xxx" alt="示例圖片"/></span>
</div>
.test span img {border:1px blue solid;}
div span img {border:1px blue solid;}
后代選擇器實際上是使用：多個選擇器加上中間的空格來找到具體的要控制標簽；從左往右，依次細化，最后鎖定要控制的標簽，如上例，先找到class為test的標簽，再從他的子標簽里查找span標簽，再從span的子標簽中找到IMG標簽。
7.偽類選擇器
偽類也是選擇器的一種，但是用偽類定義的CSS樣式并不是作用在標簽上的。偽類作用在標簽的狀態上。由于很多瀏覽器支持不同類型的偽類，沒有一個統一的標準，所以很多偽類都不常被用到。偽類包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一組偽類是主流瀏覽器都支持的，就是超鏈接的偽類，包括:link:、:visited、:hover和:active。
a的這四個偽類，分別表示了a的四種狀態，要注意的是，a可以只具有一種狀態（:link），或者同時具有2種或者三種狀態！比如說，任何一個有HREF屬性的a標簽，在未有任何操作時都已經具備了:link的條件，也就是滿足了有鏈接屬性這個條件；如果訪問過的a標簽，同時會具備 :link :visited 兩種狀態。把鼠標移到訪問過的a標簽上
8.字符串匹配的屬性選擇符--主要有三種
語法：E[att^="val"] ： {attribute}
說明：匹配具有att屬性、且值以val開頭的E元素
代碼如下:
<span ><style type="text/css">
p[title^="val"] {color:#FF0000;}
</style>
<body>
<div >
<p title="value">匹配具有att屬性、且值以val開頭的E元素</p>
</div></span>
語法:E[att$="val"] ： {attribute}
說明：匹配具有att屬性、且值以val結尾的E元素
代碼如下:
<style type="text/css">
p[title$="val"] {font-weight:bold;}
</style>
<body>
<div >
<p title="this is val">匹配具有att屬性、且值以val結尾的E元素</p>
</div>
</body>
語法:E[att*="val"] ： {attribute}
說明：匹配具有att屬性、且值中包含val的E元素。
代碼如下:
<style type="text/css">
p[title*="val"] {text-decoration:underline;}
</style>
<title>子串匹配的屬性選擇符 E[att*="val"]</title>
</head>
<body>
<div >
<p title="have val word">匹配具有att屬性、且值中含有val的E元素</p>
</div>
</body>
感謝各位的閱讀，以上就是“CSS選擇器的種類和作用”的內容了，經過本文的學習后，相信大家對CSS選擇器的種類和作用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
