首先說主要都有哪些先擇器
1.標籤選取器（如：body,p,p,ul,li）
2.類別選取器（如：class="head",class="head_logo"）
3.ID選取器（如：id="name",id="name_txt"）
4.全域選取器（如：*號）
5.組合選取器（如：.head .head_logo,注意兩選取器用空格鍵分開）
6.繼承選取器（如：p p,注意兩選取器用空格鍵分開）
7.偽類別選取器（如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）
8.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
在標籤內寫入style=" "的方式，應該是CSS的一種引入方式，而不是選取器，因為根本就沒有用到選取器。
我們分別來看下這些選取器：
1：標籤名選取器
一個XHTML文檔中有許多標籤，例如p標籤，h1標籤等。若要使文檔中的所有p標籤都使用同一個CSS樣式，就應使用標籤選取器。
p {color:red;border:1px blue solid;} p {color:#000;}
2：類別選取器
使用標籤選取器可以為整個XHTML文檔中的同一個標籤指定相同的CSS樣式。但是在實際運用中，XHTML文檔中的同一個標籤會被反覆使用。若要為相同的標籤賦予不同的CSS樣式就應使用類別選取器。
<p class="test">測試代碼</p> .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樣式指定給一個標籤。
<p id="test">測試代碼</p> #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等。
比如 <h1 class="red"></h1> H1.red {color: red}
群組選取器
.test1,span,test2 {border:1px blue solid;} p,span,img {border:1px blue solid;}
群組選取器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選取器放在一起，省了很多代碼。
6.繼承選取器
學習使用繼承選取器就必須先瞭解文檔樹和CSS的繼承。每個XHTML都可以被看作一個文檔樹，文檔樹的根部就是html標籤，而head和body標籤就是其子項目。在head和body裡的其他標籤就是html標籤的孫子項目。整個XHTML就呈現一種祖先和子孫的樹狀關係。CSS的繼承是指子孫元素繼承祖先元素的某些屬性。以下通過執行個體來詳細講解這兩個重要的CSS概念。
文檔樹 CSS的繼承 繼承選取器
<p class="test"> <span><img src="xxx" alt="樣本圖片"/></span> </p> .test span img {border:1px blue solid;} p 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="font-size:18px;"><style type="text/css"> p[title^="val"] {color:#FF0000;} </style> <body> <p style="width:733px; border: 1px solid #666; padding:5px;"> <p title="value">匹配具有att屬性、且值以val開頭的E元素</p> </p></span>
文法:E[att$="val"] ： {attribute}
說明：匹配具有att屬性、且值以val結尾的E元素
<style type="text/css"> p[title$="val"] {font-weight:bold;} </style> <body> <p style="width:733px; border: 1px solid #666; padding:5px;"> <p title="this is val">匹配具有att屬性、且值以val結尾的E元素</p> </p> </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> <p style="width:733px; border: 1px solid #666; padding:5px;"> <p title="have val word">匹配具有att屬性、且值中含有val的E元素</p> </p> </body>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
相關推薦：
關於CSS background的使用方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
