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。）

在標籤內寫入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也是後臺開發人員會常常用的，因此前端開發人員應該儘可能少的使用。

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;}

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:、:vistited、:hover、:active、:focus和:lang等等。其中有一組僞類是主流瀏覽器都支持的，就是超連接的僞類，包括:link:、:vistited、:hover和:active。

a的這四個僞類，分別表示了a的四種狀態，要注意的是，a能夠只具備一種狀態（:link），或者同時具備2種或者三種狀態！好比說，任何一個有HREF屬性的a標籤，在未有任何操做時都已經具有了:link的條件，也就是知足了有連接屬性這個條件；若是訪問過的a標籤，同時會具有
:link :visited 兩種狀態。把鼠標移到訪問過的a標籤上的時候，a標籤就同時具有了 :link :visited :hover三種狀態。

a:link{text-decoration:none;}