CSS3選擇器——基本選擇器

CSS是一種用於屏幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那麼這樣咱們選擇相應的元素就很重要了，如何選擇對應的元素，此時就須要咱們所說的選擇器。選擇器主要是用來肯定html的樹形結構中的DOM元素節點。我把CSS選擇器分開成三部分，第一部分是咱們經常使用的部分，我把他叫作基本選擇器；第二部分我把他稱做是屬性選擇器，第三部分我把他稱做僞類選擇器，這一部分也是最難理解和掌握的部分，今天咱們先來看第一部分——基本選擇器。

咱們先來看一個經常使用的選擇器大全列表圖： 

*	E	.class
#ID	E F	E>F
E+F	E(attribute)	E(attribute=value)
E(attribute~=value)	E(attribute|=value)	:first-child
:lang()	:before	::before
:after	::after	:first-letter
::first-letter	:first-line	::first-line
E(attribute^=value)	E(attribute$=value)	E(attribute*=value)
E ~ F	:root	:last-child
:only-child	:nth-child()	:nth-last-type
:first-of-type	:last-of-type	:only-of-type
:nth-of-type()	:nth-last-of-type()	:empty
:not()	:target	:enabled
:disabled	:checked

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面咱們先看看上表中基本的選擇器的使用方法和其所起的做用，爲了更好的說明問題，先建立一個簡單的DOM結構，以下：

<div class="demo">
    <ul class="clearfix">
        <li id="first" class="first">1</li>
        <li class="active important">2</li>
        <li class="important items">3</li>
        <li class="important">4</li>
        <li class="items">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li id="last" class="last">10</li>
    </ul>
</div>

給這個demo加上一些樣式，讓他好看一點：

.demo {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;            
}

 li {
    float: left;
    height: 20px;
    line-height: 20px;
    width: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    background: #f36;
    color: green;
    margin-right: 5px;
}

初步效果以下所示：

1、通配符選擇器（*）

通配符選擇器是用來選擇全部元素：

/*demo1*/
*{
    marigin: 0;
    padding: 0;
}

/*demo2*/
.demo *{
        border:1px solid blue;
}

demo1是選擇網頁的全部元素，它們的margin和padding都設置爲0；demo2就是選擇某一個元素下面的全部元素。

demo2效果以下所示：

從上面的效果圖看，只要是div.demo下的元素邊框都加上了新的樣式。全部瀏覽器支持通配符選擇器。

 

2、元素選擇器（E）

元素選擇器，是css選擇器中最多見並且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等，好比咱們這個demo：中元素包括了div,ul,li等。

li{background-color:grey; color:orange;}

上在表示選擇頁面的li元素，並設置了背景色和前景色，效果以下：（全部瀏覽器支持通配符選擇器）

 

3、類選擇器（.className）

 類選擇器是以一獨立於文檔元素的方式來指定樣式，使用類選擇器以前須要在html元素上定義類名，換句話說須要保證類名在html標記中存在，這樣才能選擇類，如：

<li class="active important items">2</li>

其中「active,important, items」就是咱們以類給li加上一個類名，以便類選擇器能正常工做，從而更好的將類選擇器的樣式與元素相關聯。

.important {font-weight: bold; color: yellow;}

上面代碼表示是給有important類名的元素加上一個「字體爲粗體，顏色爲黃色」的樣式，如：

類選擇器還能夠結合元素選擇器來使用，好比說，你文檔中有好多個元素使用了類名「items」，但你只想在p元素這個類名上修改樣式，那麼你能夠這樣進行選擇並加上相應的樣式：

p.items {color: red;}

上面代碼只會匹配class 屬性包含important 的全部p 元素，但其餘任何類型的元素都不匹配，包括有「items」這個類名的元素，上面也說過了「p.items」只會對p元素而且是其有一個類名叫「items」。不符合這兩個條件的都不會被選擇。

類選擇器還有能夠具有多類名，上面咱們也看到了，咱們li元素中同時有兩個或多少類名，其中他們以空格隔開，那麼選擇器也可使用多類鏈接在一塊兒，如：

.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
.first.last {color: blue;}

正如上面的代碼所示，".important.items"這個選擇器只對元素中同時包含了"important"和"items"兩個類才能起做用，如圖所示：

有一點你們須要注意，若是一個多類選擇器包含的類名中其中有一個不存在，那麼這個選擇器將沒法找到相匹配的元素 好比說下在這句代碼，他就沒法到找相對應的的元素標籤，由於咱們列表中只有一個li.first和一個li.last，不存在有一個叫li.first.last的列表項：

.first.last {color: blue;}

全部瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。

4、id選擇器（#ID）

ID選擇器和上面說的類選擇器是很類似的，在使用ID選擇器以前也須要先在html文檔中加註ID名稱，這樣在樣式選擇器中才能找到相對應的元素，不一樣的是ID選擇器是一個頁面中惟一的值，咱們在類使用時是在相對應的類名前加上一個「.」號（.className）而id選擇器是在名稱前使用"#"如(#id)：

 

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}

 

上在的代碼就是選擇了id爲"first"和"last"的列表項，其效果以下：

ID選擇器有幾個地方須要特別注意的，第一：一個文檔中一個id選擇器只充許使用一次，由於id在頁面中是惟一的；第二，id選擇器不能像類選擇器同樣多個合併使用，一個元素只能命名一個id名；第三，能夠在不一樣的文檔中使用相同的id名，好比說在「test.html」中給h1定了「＃important」,也能夠給「test1.html」中定義p的id爲"#important"，但前提是無論在test.html仍是test1.html中只充許有一個id叫"#important"的存在。

全部瀏覽器都支持ID選擇器。

那麼何時採用id命名？何時採用類命名呢？我我的認爲就是關鍵的一點就是具備惟一性使用id選擇器；公用的，相似的使用類選擇器。使用這兩個選擇器時，最好區別大小寫。

5、後代選擇器（E F）

後代選擇器也被稱做包含選擇器,所起做用就是能夠選擇某元素的後代元素，好比說:E F，前面E爲祖先元素，Ｆ爲後代元素，所表達的意思就是選擇了Ｅ元素的全部後代Ｆ元素，請注意他們之間須要一個空格隔開。這裏Ｆ不論是E元素的子元素或者是孫元素或者是更深層次的關係，都將被選中，換句話說，不論Ｆ在Ｅ中有多少層關係，都將被選中：

 

.demo li {color: blue;}

上面表示的是，選中div.demo中全部的li元素，效果如圖：

全部瀏覽器都支的後代選擇器。

6、子元素選擇器（E>F）

子元素選擇器只能選擇某元素的子元素，其中E爲父元素，而F爲子元素，其中E>F所表示的是選擇了Ｅ元素下的全部子元素Ｆ。這和後代選擇器（Ｅ Ｆ）不同，在後代選擇器中Ｆ是Ｅ的後代元素，而子元素選擇器Ｅ > F，其中Ｆ僅僅是Ｅ的子元素而以。

ul > li {background: green;color: yellow;}

上在代碼表示選擇ul下的全部子元素li。如：

IE6不支持子元素選擇器。

7、相鄰兄弟元素選擇器（E+F）

相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，並且他們具備一個相同的父元素，換句話說，EF兩元素具備一個相同的父元素，並且Ｆ元素在Ｅ元素後面，並且相鄰，這樣咱們就可使用相鄰兄弟元素選擇器來選擇Ｆ元素。

li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代碼表示選擇li的相鄰元素li，咱們這裏一共有十個li，那麼上面的代碼選擇了從第2個li到 10 個li，一共九個，請看效果：

由於上面的li+li其中第二li是第一li的相鄰元素，第三個又是第二個相鄰元素，所以第三個也被選擇，依此類推，因此後面九個li都被選中了，若是咱們換過一種方式來看，可能會更好的理解一點：

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

按照前面所講的知識，這句代碼很明顯選擇了li.active後面相鄰的li元素，注意了和li.active後面相鄰的元素僅只有一個的。如圖：

IE6不支持這個選擇器

8、通用兄弟選擇器（E~F）

通用兄弟元素選擇器是CSS3新增長一種選擇器，這種選擇器將選擇某元素後面的全部兄弟元素，他們也和相鄰兄弟元素相似，須要在同一個父元素之中，換句話說，E和F元素是屬於同一父元素以內，而且F元素在Ｅ元素以後，那麼E ~ F 選擇器將選擇中全部Ｅ元素後面的Ｆ元素。好比下面的代碼：

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代碼所表示的是，選擇中了li.active 元素後面的全部兄弟元素li,如圖所示：

通用兄弟選擇器和相鄰兄弟選擇器極其類似，只不過，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的後面元素（選中的僅一個元素）；而通用兄弟元素選擇器，選中的是元素相鄰的後面兄弟元素，這樣提及來可能會有迷糊，你們能夠仔細看看其相鄰兄弟的效果圖。

IE6不支持這種選擇器的用法。

9、羣組選擇器（selector1,selector2,...,selectorN）

羣組選擇器是將具備相一樣式的元素分組在一塊兒，每一個選擇器之間使用逗號「，」隔開，如上面所示selector1,selector2,...,selectorN。這個逗號告訴瀏覽器，規則中包含多個不一樣的選擇器，若是不有這個逗號，那麼所表達的意就徹底不一樣了，省去逗號就成了咱們前面所說的後代選擇器，這一點你們在使用中千萬要當心加當心。咱們來看一個簡單的例子：

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

由於li.first和li.last具備相同的樣式效果，因此咱們把他們寫到一個組裏來：（全部瀏覽器都支持羣組選擇器）

 

上面九種選擇器是CSS3中的基本選擇器，而咱們最經常使用的是元素選擇器、類選擇器、ID選擇器、後代選擇器、羣組選擇器，同時你們能夠在實際應用中把這些選擇器結合起來使用，達到目的就好了。

來源:W3CPLUS