css選擇器

css的選擇器，對於常見的選擇器，我想沒必要描述。由於每天在使用，可是對於一些新的CSS3的選擇器，要運用的靈活到位，就有必定的難度。

• 元素選擇器
• 選擇器分組
• 通配選擇器
• 類選擇器
• ID選擇器
• 屬性選擇器
• 後代選擇器
• 子元素選擇器
• 相鄰兄弟選擇器
• 僞類
• 僞元素

1、基本選擇器

1. 通配選擇器（*）
2. ID選擇器(#ID)
3. 元素選擇器（E）
4. 類選擇器（.className）
5. 後代選擇器（E F）
6. 選擇器分組（）

1. 子元素選擇器（E > F）

子元素選擇器（Child selectors）只能選擇做爲某元素子元素的元素。

若是您不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

h1 > strong { color:red; }
<h1>This is 
　　<strong>very</strong>
　　<div>
　　　　<strong>no very</strong>
　　</div>
　　<strong>very</strong>
 good
</h1>

使用h1>strong 匹配 只能匹配上左邊和右邊那個strong，但中間那個不行，由於strong是h1的後代而不是其子元素。

E>F  f必須是E的子元素，才能匹配上，不能是後代元素

IE6不支持子元素選擇器。

2. 相鄰兄弟元素選擇器（E + F）

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

.first + li {color : red; }
<ul>   
 　　<li class="first">劉備</li>
    <li>關羽</li>
    <li>張飛</li>
</ul>
<ol>
    <li class="first">阿笠博士</li>
    <li>毛利蘭</li>
    <li>柯南</li>
</ol>
<ul>
　 <li class="first">劉備</li>
　　<div>111</div>
　　<li>關羽</li>
　　<li>張飛</li>
</ul>

 

結果

 

這句代碼很明顯選擇了.frist後面相鄰的li元素，注意了和.frist後面相鄰的元素僅只有一個的

IE6不支持相鄰兄弟元素選擇器。

3. 通用兄弟元素選擇器（E ~ F）

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

.first ~ li {color : red; }

結果

選擇中了.first  元素後面的全部兄弟元素li

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

二、屬性選擇器

1.  E[attr]：只使用屬性名，但沒有肯定任何屬性值；
2. E[attr="value"]：指定屬性名，並指定了該屬性的屬性值；
3. E[attr~="value"]：指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫；
4. E[attr^="value"]：指定了屬性名，而且有屬性值，屬性值是以value開頭的；
5. E[attr$="value"]：指定了屬性名，而且有屬性值，並且屬性值是以value結束的；
6. E[attr*="value"]：指定了屬性名，而且有屬性值，並且屬值中包含了value；
7. E[attr|="value"]：指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）;
8. 爲了演示css3屬性選擇器的使用方法，先搞個dom結構圖

9. <div class="demo clearfix">
   　 <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
      <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
      <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
      <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
      <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
      <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
      <a href="" class="links item" title="open the website" lang="cn">7</a>
      <a href="" class="links item" title="close the website" lang="en-zh">8</a>
      <a href="" class="links item" title="http://www.sina.com">9</a>
      <a href="" class="links item last" id="last">10</a>
   </div>

   爲了美觀

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

             .demo a {
                float: left;
                display: block;
                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;
                text-decoration: none;
            }

最初效果以下所示：

下面就開始針對上面列出的每一個屬性選擇器來，具體分析其使用方法。

1、E[attr]

E[attr]屬性選擇器是CSS3屬性選擇器中最簡單的一種。若是你但願選擇有某個屬性的元素，而不論這個屬性值是什麼，你就可使用這個屬性選擇器，如：

			.demo a[id] {background: blue; color:yellow;font-weight:bold;}
		

上面代碼所表示的，選擇了div.demo下全部帶有id屬性的a元素，並在這個元素上使用背景色爲蘭色，前景色爲黃色，字體加粗的樣式，對照上面的html，咱們不難發現，只有第一個和最後一個連接使用了id屬性，因此選中了這兩個a元素，效果以下所示：

上面是單一屬性的使用，你也可使用多屬性進行選擇元素，如E[attr1][attr2], 這樣只要是同時具備這兩屬性的元素都將被選中：

			.demo a[href][title] {background: yellow; color:green;}
		

不用我說，上面的代碼你們都知道是什麼意思了，他表示的是選擇div.demo下的同時具備href,title兩個屬性的a元素，而且應用相對應的樣式，以下所示：

IE6不支持這個選擇器。

2、Ｅ[attr="value"]

E[attr="value"]選擇器和E[attr]選擇器，從字面上就能很清楚的理解出來，E[attr="value"]是指定了屬性值「value」，而E[attr]只是選擇了有對應的屬性，並無明確指其對應的屬性值"value"，這也是這兩種選擇器的最大區是之處。從而縮小了選擇 圍，更能精確選擇本身須要的元素，在前面實例基礎上咱們進行一下簡單的修改：

			.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
		

和前面代碼相比較，此處在id的屬性基礎上指定了相應的value值爲「first」,這樣一來咱們選中的是div.demo中的a元素，而且這個元素有一個"id="first""屬性值，請看下在的效果圖：

E[attr="value"]屬性選擇器也能夠多個屬性並寫，進一步縮小選擇範圍：

			.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}
		

效果以下：

對於E[attr="value"]這種屬性值選擇器有一點須要注意：屬性和屬性值必須徹底匹配，特別是對於屬性值是詞列表的形式時，如：

			<a href="" class="links item" title="open the website">7</a>
		

例如上面的代碼，若是你寫成：

			.demo a[class="links"]{color:red};/*這是一種寫法不能和上面的html所匹配*/
		

上面的屬性選擇器並不會和上在的html匹配,由於他們的屬性和屬性值沒有徹底匹配，須要改爲以下所示的代碼，才能正確匹配：

			.demo a[class="links item"]{color:red};/*這樣纔是匹配的，記得中間的空格不能少的喲*/
		

IE6瀏覽器不支持這種選擇器。

3、E[attr~="value"]

若是你想根據屬性值中的詞列表的某個詞來進行選擇元素，那麼就須要使用這種屬性選擇器：E[attr~="value"]，這種屬性選擇器是屬性值是一個或多個詞列表，若是是列表時，他們須要用空格隔開，只要屬性值中有一個value相匹配就能夠選中該元素，而咱們前面所講的E[attr="value"]是屬性值須要徹底匹配纔會被選中，他們二者區別就是一個有「〜」號，一個沒有「〜」號。咱們來看一個這方面的實例：

			.demo a[title~="website"]{background:orange;color:green;}
		

上面代碼表示的是，div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇，回頭看看咱們的html，不難發現全部a元素中「2，6，7，8」這四個a元素的title中都含有,因此被選中，請看效果：

若是咱們在上面的代碼中，把那個「〜」號省去，你們看看他們不一樣之處：

			.demo a[title="website"]{background:orange;color:green;}
		

這樣將不會選擇中任何元素，由於在全部a元素中沒法找到徹底匹配的"title='website'",換句話說就沒有選中任何元素，效果以下：

這個實例再次證實了E[attr="value"]和E[attr~="value"]之間的區別，和其中「〜」所取的做用，我總結了一句話：屬性選擇器中有波浪（〜）時屬性值有value時就相匹配，沒有波浪（〜）時屬性值要徹底是value時才匹配。

IE6不支持E[attr~="value"]屬性選擇器。

4、E[attr^="value"]

E[attr^="value"]屬性選擇器，指的是選擇attr屬性值以「value」開頭的全部元素，換句話說，選擇的屬性其以對應的屬性值是以「value」開始的，一塊兒來看個實例：

			.demo a[href^="http://"]{background:orange;color:green;}
			.demo a[href^="mailto:"]{background:green;color:orange;}
		

上面代碼表示的是選擇了以href屬性，而且以"http://"和"mailto:"開頭的屬性值的全部a元素，換過更簡單一點的呢？只要a元素中的href屬性值是以"http://"或"mailto:"開頭的a元素都會以選中，那麼下面你們請對照上面的html和下面的效果圖，看看是否是那麼一回事：

IE6不支持E[attr^="value"]選擇器。

5、E[attr$="value"]

Ｅ[attr$="value"]屬性選擇器恰好與E[attr^="value"]選擇器相反，E[attr$="value"]表示的是選擇attr屬性值以"value"結尾的全部元素，換句話說就是選擇元素attr屬性，而且他的屬性值是以value結尾的，這個運用在給你一些特殊的連接加背景圖片很方便的，好比說給pdf,png,doc等不一樣文件加上不一樣icon，咱們就可使用這個屬性來實現，如：

			.demo a[href$="png"]{background:orange;color:green;}
		

上面代碼表示的是，選擇div.demo中元素有href屬性，並以png值結尾的a元素。（正如上面所說，只不過這裏使用的是改變元素的背景色），效果以下：

IE6不支持E[attr$="value"]屬性選擇器。

6、E[attr*="value"]

E[attr*="value"]屬性選擇器表示的是選擇attr屬性值中包含子串"value"的全部元素。也就是說，只要你所選擇的屬性，其屬性值中有這個"value"值都將被選中，如：

			.demo a[title*="site"]{background:black;color:white;}
		

上面代碼表示的是：選擇了div.demo中a元素，而a元素的title屬性中只要有"site"就符合選擇條件。效果以下：

IE6不支持E[attr*="value"]選擇器。

7、E[attr|="value"]

E[attr|="value"]是屬性選擇器中的最後一種，在說這個選擇器使用以前先提醒你們attr後面的是一個豎線「｜」而不是l，當心搞錯了。E[attr|="value"]被稱做爲特定屬性選擇器。這個選擇器會選擇attr屬性值等於value或以value-開頭的全部元素,咱們來看個實例：

			.demo a[lang|="zh"]{background:gray;color:yellow;}
		

上面的代碼會選中了div.demo中lang屬性等於zh或以zh-開頭的全部a元素，你們能夠對照前面的html代友，其中"2,3,4,6"被選中，由於他們都有一個lang屬性，而且他們的屬性值都符合以"zh"或"zh-"開始的元素。具體效果以下：

因此這種屬性選擇器用來匹配以「女value-1」,"value-2"的屬性是很方便的，好比說你頁面中有不少圖片，圖片文件名都是以"figure-1","figure-2"這樣的方式來命名的，那麼使用這種選擇器選中圖片就很方便了，你們能夠在本地嘗試一下，這種屬性選擇器最經常用的地方是如上面的示例用來匹配語言。

IE6不支持E[attr|="value"]選擇器。

 

有關於屬性選擇器就上面這些內容了，屬性選擇器除了IE6不支持外，其餘的瀏覽器都能支持，這樣一來，若是你在你的頁面上使用了屬性選擇器，並且你須要處理ie6兼容問題，那你就須要確保IE6用別的方法來實現或者你應該確保IE6用戶將能得到一個可用的頁面。七種屬性選擇器中E[attr="value"]和E[attr*="value"]是最實用的，其中E[attr="value"]能幫咱們定位不一樣類型的元素，特別是表單form元素的操做，好比說input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件，好比說你的網站上不一樣的文件類型的連接須要使用不一樣的icon圖標，用來幫助你的網站提升用戶體驗，就像前面的實例，能夠經過這個屬性給".doc",".pdf",".png",".ppt"配置不一樣的icon圖標。

最後關於css3的選擇器    關注一下