要當個稱職的網頁設計師，程式碼要乾淨好維護，更要能靈活的運用一些好用的選擇器，讓自己可以更容易及簡潔的寫出更好的CSS代碼。以下筆記除了常用的#id 選擇符和 .class類選擇符之外，其他好用必需筆記的CSS選擇符。
相鄰選擇符 X+Y
ul + p { color: red; } 它將只選擇緊貼在X元素之後Y元素。上面的例子，僅每一個ul之後的第一個段落元素的文本為紅色。
子代選擇器 X > Y
div#container > ul { border: 1px solid black; }
X Y 和X > Y之間的不同點是後者(X > Y)只選擇直接子代。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X ~ Y
ul ~ p { color: red; }
這是兄弟選擇符和X + Y一樣，然而，它沒有約束。與相鄰選擇符（ul + li）僅選擇前一個選擇符後面的
第一個元素比起來，兄弟選擇符更寬泛。它會選擇，我們上面例子中更在ul後面的任何p元素。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
屬性選擇器 X[title]
a[title] { color: green; }
只會選擇有title屬性的錨標籤。沒有此屬性的錨標籤將不受影嚮
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href=”foo”]
a[href=”http://net.tutsplus.com”] { color: #1f6053; /* nettuts green */ }
上面的代碼段將給所有href屬性為http://net.tutsplus.com的錨標籤添加樣式；他們將會顯示為我們的品牌綠色。所有其他的錨標籤將不受影響。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href*=”nettuts”]
*號指定了包含該屬性的值必須包含定義的值。就是說，這句代碼包含了href值為nettuts.com，net.tutsplus.com或者tutsplus.com。這個描述過於寬泛，如果是某個錨點標籤鏈接到某個連接中帶有tuts非Envato的網站（tutsplus屬於Envato旗下網站）呢？因此你需要更多特性來限制，分別使用^和&來限定字符串的開始和結束。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href^=”http”]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }使用^(carat)符這個符號常常在正則表達式中表示字符串的開始。如果我們想指向所有以”http”開頭的”href”屬性的錨點的話，我們就可以使用類似於上面的那段代碼
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href$=”.jpg”]
a[href$=".jpg"] {
color: red;
} 使用正則表達式符號，$(dolor)，來作為字符串的結束標記。這種情況下，我們就會搜索所有url以.jpg為結尾的錨點啦。記住記住這種情況下gif和png格式的圖片不會被選擇
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[data-*=”foo”]
a[data-filetype="image"] { color: red; }通過多個選擇器來選擇，如：
a[href$=”.jpg”], a[href$=”.jpeg”], a[href$=”.png”], a[href$=”.gif”] { color: red; } 加上自定義屬性 data-filetype=”image”
<a href=”path/to/image.jpg” data-filetype=”image”> Image Link </a> 再這樣定義CSS即可選到我們要的元素
a[data-filetype="image"] {
color: red;
}兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[foo~=”bar”]
~(tilda)符，它可以幫助我們指向那些以空格隔開多個值的屬性的元素
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } 如： <a href=”path/to/image.jpg” data-info=”external image”> Click Me, Fool </a>
通過使用~ 屬性選擇器的技巧，我們就可以指向任何具有著兩種屬性的任何一種
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X:checked
這種偽類只會匹配已經被選中的單選元素
兼容性
- E9+
- Firefox
- Chrome
- Safari
- Opera
X:not(selector)
not偽類灰常有用。例如我要選擇所有的div，除了有id為container的。上面那個代碼片段就能完美的實現
如果我想選擇除了p以外的所有元素，可以這麼做：
*:not(p) {
color: green;
} 兼容性
- IE9+
- Firefox
- Chrome
- Safari
- Opera
X::pseudoElement
我們可以使用偽元素（以::為表示）來定義元素的樣式。例如第一行，第一個字符，記住啦，這種方法只能應用於同級元素才有效。
p::first-line { font-weight: bold; font-size: 1.2em; }
指定p的第一个字符的样式
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
這段代碼會找到所有段落，然後再從中定義這些段落的第一個字符。這常常使用在仿報紙的文章首字母樣式。
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
X:nth-child(n)
nth-child接收整數和變量，不過不是從0開始的，如果你想選定第二個li，使用li:nth-child(2)
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
X:nth-last-child(n)
直接選擇最後一個子元素
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:nth-of-type(n)
想像一下標記5個無序列表（UL）。如果你想定義第三個ul，並且沒有一個唯一的id來找到它，你就可以使用nth-of-type(3)偽類了。在上面這個代碼段中，只有第三個ul才會有黑色的邊框。
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
X:nth-last-of-type(n)
可以使用nth-last-of-type來從結束開始回溯這個選擇器，來找到我們想要的元素
ul:nth-last-of-type(3) {
border: 1px solid black;
}
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:first-child
這個結構的偽類讓我們可以選擇某個元素的第一個子孩子。你通常可以使用這個辦法來刪除第一個或者最後一個元素的邊框。
ul li:first-child {
border-top: none;
} 兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X:last-child
與first-child相反，last-child會選擇父節點的最後一個子節點。
兼容性
- IE9+
- Firefox
- Chrome
- Safari
- Opera
X:only-of-type
這種結構的偽類有幾種灰常聰明的用法。它可以選定在其父節點內沒有兄弟節點的元素。例如，我們可以選擇只有一個li作為其子孩子的ul。
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:first-of-type
first-of-type 偽類可以讓你選擇該類型的第一個兄弟節點
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera