轉載地址：http://www.iteye.com/news/29777

大概大家讀知道`id`,`class`以及`descendant`選擇器，並且整體都在使用它們，那麼你正在錯誤擁有更大級別的靈活性的選擇方式。這篇文章裡面提到的大部分選擇器都是在CSS3標準下的，所以它們只能在相應最新版本的瀏覽器中才能生效，你完全應該把這些都記在你聰明的腦袋裡面。 

1. *
Css程式碼 

1. * {  
2.   margin: 0;  
3.   padding: 0;  
4. }  

在我們看比較高階的選擇器之前，應該認識下這個眾所周知的清空選擇器。星號呢會將頁面上所有每一個元素都選到。許多開發者都用它來清空`margin`和`padding`。當然你在練習的時候使用這個沒問題，但是我不建議在生產環境中使用它。它會給瀏覽器憑添許多不必要的東西。 
`*`也可以用來選擇某元素的所有子元素。 
Css程式碼 

1. #container * {  
2.   border: 1px solid black;  
3. }  

它會選中`#container`下的所有元素。當然，我還是不建議你去使用它，如果可能的話。 

DEMO
相容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X
Css程式碼 

1. #container {  
2.    width: 960px;  
3.    margin: auto;  
4. }  

在選擇器中使用`#`可以用id來定位某個元素。大家通常都會這麼使用，然後使用的時候大家還是得相當小心的。 
需要問自己一下：我是不是必須要給這個元素來賦值個id來定位它呢？ 

`id`選擇器是很嚴格的並且你沒辦法去複用它。如果可能的話，首先試試用標籤名字，HTML5中的新元素，或者是偽類。 
DEMO
相容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X
Css程式碼 

1. .error {  
2.   color: red;  
3. }  

這是個`class`選擇器。它跟`id`選擇器不同的是，它可以定位多個元素。當你想對多個元素進行樣式修飾的時候就可以使用`class`。當你要對某個特定的元素進行修飾那就是用`id`來定位它。 
DEMO
相容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y
Css程式碼 

1. li a {  
2.   text-decoration: none;  
3. }  

下一個常用的就是`descendant`選擇器。如果你想更加具體的去定位元素，你可以使用它。例如，假如，你不需要定位所有的`a`元素，而只需要定位`li`標籤下的`a`標籤？這時候你就需要使用`descendant`選擇器了。 

專家提示：如果你的選擇器像`X Y Z A B.error`這樣，那你就錯了。時刻都提醒自己，是否真的需要對那麼多元素修飾。 
DEMO
相容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X
Css程式碼 

1. a { color: red; }  
2. ul { margin-left: 0; }  

如果你想定位頁面上所有的某標籤，不是通過`id`或者是’class’，這簡單，直接使用型別選擇器。 
DEMO
相容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited 和 X:link
Css程式碼 

1. a:link {color:red;}  
2. a:visited {color: purple;}  

我們使用`:link`這個偽類來定位所有還沒有被訪問過的連結。 
另外，我們也使用`:visited`來定位所有已經被訪問過的連結。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X+Y
Css程式碼 

1. ul + p {  
2.    color: red;  
3. }  

這個叫相鄰選擇器。它指揮選中指定元素的直接後繼元素。上面那個例子就是選中了所有`ul`標籤後面的第一段，並將它們的顏色都設定為紅色。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X>Y
Css程式碼 

1. div#container > ul {  
2.   border: 1px solid black;  
3. }  

`X Y`和`X > Y`的差別就是後面這個指揮選擇它的直接子元素。看下面的例子： 
Css程式碼 

1. <div id="container">  
2.    <ul>  
3.       <li> List Item  
4.         <ul>  
5.            <li> Child </li>  
6.         </ul>  
7.       </li>  
8.       <li> List Item </li>  
9.       <li> List Item </li>  
10.       <li> List Item </li>  
11.    </ul>  
12. </div>  

`#container > ul`只會選中`id`為’container’的`div`下的所有直接`ul`元素。它不會定位到如第一個`li`下的`ul`元素。 
由於某些原因，使用子節點組合選擇器會在效能上有許多的優勢。事實上，當在javascript中使用`css`選擇器時候是強烈建議這麼做的。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y
Css程式碼 

1. ul ~ p {  
2.   color: red;  
3. }  

兄弟節點組合選擇器跟`X+Y`很相似，然後它又不是那麼的嚴格。`ul + p`選擇器只會選擇緊挨跟著指定元素的那些元素。而這個選擇器，會選擇跟在目標元素後面的所有匹配的元素。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]
Css程式碼 

1. a[title] {  
2.   color: green;  
3. }  

這個叫屬性選擇器，上面的這個例子中，只會選擇有title屬性的元素。那些沒有此屬性的錨點標籤將不會被這個程式碼修飾。那再想想如果你想更加具體的去篩選？那… 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]
Css程式碼 

1. a[href="http://strongme.cn"] {  
2.   color: #1f6053; /* nettuts green */  
3. }  

上面這片程式碼將會把`href`屬性值為`http://strongme.cn`的錨點標籤設定為綠色，而其他標籤則不受影響。 

注意我們將值用雙引號括起來了。那麼在使用Javascript的時候也要使用雙引號括起來。可以的話，儘量使用標準的CSS3選擇器。

這樣可以用了，但是還是有點死，如果不是這個連結，而是類似的連結，那麼這時就得用正則表示式了。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="strongme"]
Css程式碼 

1. a[href*="strongme"] {  
2.   color: #1f6053;  
3. }  

Tada,正是我們需要的，這樣，就指定了`strongme`這個值必須出現在錨點標籤的`href`屬性中，不管是`strongme.cn`還是`strongme.com`還是`www.strongme.cn`都可以被選中。 
但是記得這是個很寬泛的表達方式。如果錨點標籤指向的不是`strongme`相關的站點，如果要更加具體的限制的話，那就使用`^`和`$`，分別表示字串的開始和結束。 
DEMO
相容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="href"]
Css程式碼 

1. a[href^="http"] {  
2.    background: url(path/to/external/icon.png) no-repeat;  
3.    padding-left: 10px;  
4. }  

大家肯定好奇過，有些站點的錨點標籤旁邊會有一個外鏈圖示，我也相信大家肯定見過這種情況。這樣的設計會很明確的告訴你會跳轉到別的網站。 
用克拉符號就可以輕易做到。它通常使用在正則表示式中標識開頭。如果我們想定位錨點屬性`href`中以`http`開頭的標籤，那我們就可以用與上面相似的程式碼。 

注意我們沒有搜尋http://，那是沒必要的，因為它都不包含https://。

那如果我們想找到所有指向一張圖片的錨點標籤呢？那我們來使用下`&`字元。 
DEMO
相容性 

相關推薦

必須記住的 30 類 CSS 選擇器

轉載地址：http://www.iteye.com/news/29777 大概大家讀知道`id`,`class`以及`descendant`選擇器，並且整體都在使用它們，那麼你正在錯誤擁有更大級別的靈活性的選擇方式。這篇文章裡面提到的大部分選擇器都是在CSS3標準下的，

這30類CSS選擇器 你必須記在腦袋裡！

大概大家都知道id,class以及descendant選擇器，並且整體都在使用它們，那麼你正在錯誤擁有更大級別的靈活性的選擇方式。這篇文章裡面提到的大部分選擇器都是在CSS3標準下的，所以它們只能在相應最新版本的瀏覽器中才能生效，你完全應該把這些都記在你聰明的腦袋裡面。

這 30 類 CSS 選擇器，你必須記在腦袋裡！

大概大家讀知道`id`,`class`以及`descendant`選擇器，並且整體都在使用它們，那麼你正在錯誤擁有更大級別的靈活性的選擇方式。這篇文章裡面提到的大部分選擇器都是在CSS3標準下的，所以它們只能在相應最新版本的瀏覽器中才能生效，你完全應該把這些都記在你聰明的腦

30類CSS選擇器

CSS 選擇器是一種模式，用於選擇需要新增樣式的元素。平時使用最多也是最簡單的就是 #id、.class 和標籤選擇器，在 CSS 中還有很多更加強大更加靈活的選擇方式，尤其是在 CSS3 中，增加了很多新的選擇器，使得選擇元素更加便捷，所以必須理解這些選擇器，只有先理解

你必須記住的30個CSS選擇器[譯]

開篇 有30個CSS選擇器你必須爛熟於心，它們適應於當今各大主流瀏覽器。 1.* * { margin: 0; padding: 0; } *選擇器選擇的是每一個單一元素。很多程式設計師用上面的CSS將所有元素的margin和pa

設計中最常用的五類CSS選擇器

準確而簡潔的運用CSS選擇器會達到非常好的效果。我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。在實際工作中，最常用的選擇器有以下五類： 　　一、標籤選擇器： 　　顧名思議，標籤選擇器是直接將HTML標籤作為選擇器，

jQuery類css選擇器程式碼詳解

jQuery選擇器分類有哪些？ 1) 類css選擇器 1.1) 基本選擇器 ID選擇器、標籤選擇器、類選擇器 並集選擇器、交集選擇器、全域性選擇器 1.2) 層次選

前端必須掌握30個CSS3選擇器

也許你已經學會了CSS的三個簡單常用的選擇器：#ID，.class，標籤選擇器，可是這些就足夠了嗎？隨著CSS3的到來，作為前端開發者需要掌握下面三十個基本的選擇器，這樣才可以在平時開發中得心用手。 本文中將綜合前端開發中常用的30個CSS3選擇器，並且附帶了

最常用的五類CSS選擇器

一些新手朋友對選擇器一知半解，不知道在什麼情況下運用什麼樣的選擇器，這是一個比較頭疼的問題，針對新手朋友，對CSS選擇器作一些簡單的說明，希望能對大家的學習工作有一定的幫助，更多的CSS知識請參考Webjx.com的其他文章。 　　準確而簡潔的運用CSS選擇器會達到非常好的

30個你必須熟記的CSS選擇器

你學會了基本的id，class類選擇器和descendant後代選擇器，然後就覺得完事了嗎？如果這樣，你就會錯過許多靈活運用CSS的機會。雖然本文提到的許多選擇器都屬於CSS3，並且只能在現代的瀏覽器中使用，但學會這些是大有好處的。 1. *

CSS選擇器之偽類選擇器（偽元素）

寫法 cor outline p標簽 而不是 edit 實現 after tab selection [CSS4]應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。（IE8及以下不支持）（火狐-moz-selection）

css選擇器(1)——元素選擇器、類名和id選擇器

span pan 包含 最重要的 通過 font 給定 情況 但是 css的主要優點之一就是它能很容易地向所有同類型的元素應用一組樣式。當然它是通過選擇器來實現這一點的。 基本規則結構： 語法= 選擇器 +聲明塊 1.元素選擇器——直接使用html元素名，指向文檔元素

CSS 選擇器 選擇 擁有多個類名 的元素

nbsp strong hid style 表示 bsp ron col tro 今天開發的時候，碰到這個連起來的類名。 才想起來，這個類似於 <div class="node hide"></div> 連起來寫，表示找到 擁有這兩個類

CSS 選擇器中，元素選擇器和類選擇器的區別是什麼？

元素選擇器是最常見的 CSS 選擇器，即，文件的元素就是最基本的選擇器。選擇器通常是某個 HTML 元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。 類選擇器用於將樣式

CSS-偽類子代選擇器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>偽類子代選擇器</title>     <style>       

scrapy--解決css選擇器遇見含空格類提取問題response.css()

今天在寫爬蟲規則時 遇到一個含空格的類 剛開始使用css選擇器無法提取到任何內容，試了幾次都沒成功 之後換xpath選擇器成功提取出內容。個人找了多次未發現有處理類似問題的。下面是自己的解決辦法。 方法一》             我要用的含空格的類 position-l

css3 選擇器 簡單的分頁 css選擇器 ul.pagination li a:hover:not(.active) 選擇除了類名為 active的專案

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>練習 分頁</title>        <lin

30個你不可不知的CSS選擇器

一、五大基本選擇符 1. *（萬用字元） *萬用字元選擇器，經常用於css reset（樣式重置），清理標籤的預設樣式，但現在一般不提倡直接使用*了，主要是*會匹配所有標籤，相當耗資源。*在css的優先順序中是最低的。 * {margin: 0; padding: 0

第二天筆記-選擇器（標籤選擇器、類選擇器、css命名規範、谷歌案例、多類名選擇器、id選擇器、萬用字元選擇器、偽類選擇器）

四、選擇器 要想將CSS樣式應用於持定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分則成為選擇器（選擇符）。 （一）標籤選擇器（元素選擇器） 標籤選擇器是隻用於HTML標籤名作為選擇器，按標籤名分類，為頁面中某一類標籤指定統

CSS 的 類class選擇器 的正確寫法

1. 正確寫法： 前面是標籤名的萬用字元，後面是 class的名稱。（） *.a_class {color:red;} 下面的簡寫，儘量少用 .a_class {color:red;} 2.舉例 舉例： p.a_class {}