30個你必須記住的CSS選擇符

時間 2019-11-10

標籤必須記住 css 選擇欄目 CSS 简体版

原文原文鏈接

因此你學會了基礎的id，類和後代選擇符，而後你就一直用它們了嗎？若是是這樣，你丟失了（css的）巨大的靈活性。在本文中提到的不少選擇器屬於CSS3規範的一部分，所以，只有在現代瀏覽器中才可以使用。javascript

1.*

* {  
 margin: 0;  
 padding: 0;  
}

對於初學者，在學習更多高級選擇器以前，最早了解的選擇器。css

星號選擇器將匹配頁面裏的每個元素。不少開發者使用這個技巧將外邊距和內邊距重置爲零。雖然在快速測試時這確實很好用，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量沒必要要的負擔。html

* 也能做爲子選擇符使用。java

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

這將匹配#container div的每個後代元素。再次強調，儘可能不要使用這種技術。css3

查看例子git

兼容性es6

IE6+
Firefox
Chrome
Safari
Opera

2.#X

#container {  
   width: 960px;  
   margin: auto;  
}

井號前綴容許咱們選擇id。這是最多見的用法，不過應該慎重使用ID選擇器。github

反覆問本身：我必定須要id來匹配要選擇的元素嗎？正則表達式

id選擇符是惟一的，不容許重複使用。若是可能的話，先嚐試使用一個標籤名稱，一個新的HTML5元素，甚至是一個僞類。瀏覽器

兼容性

IE6+
Firefox
Chrome
Safari
Opera

3. .X

.error {  
  color: red;  
}

如今介紹的是類選擇符。id和類的不一樣之處在於後者能夠屢次使用。當你想給一組元素應用樣式的時候可使用類選擇符。另外，當你緊想給特殊元素應用樣式的時候才使用id。

查看例子

兼容性

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

li a {  
  text-decoration: none;  
}

下一個最經常使用的選擇符是後代選擇符。當你須要給你的選擇符增長特殊性的時候你可使用。例如，若是你只想匹配無序列表下的錨元素？此時後代選擇符派上用場。

小貼士——若是你的選擇符看起來像這樣 X Y Z A B.error，那你就錯了。時刻問本身使用這高的權重是否有必要。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

5. X

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

若是你想匹配頁面上的全部的元素，根據他們的類型，而不是id或類名？顯而易見，使用類型選擇符。若是你須要選擇全部的無序列表，請使用ul {}。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

a:link { color: red; }  
a:visited { color: purple; }

咱們使用:link 僞類選擇符選擇全部已經被點擊過的錨標籤。

此外，咱們也有:visited僞類選擇符，正如你指望的，容許咱們僅給頁面上被點擊過的或被訪問過的錨標籤應用樣式。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

ul + p {  
   color: red;  
}

這被稱做相鄰選擇符。它將只選擇緊貼在X元素以後Y元素。上面的例子，僅每個ul以後的第一個段落元素的文本爲紅色。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

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

X Y和X > Y之間的不一樣點是後者只選擇直接子代。例如，考慮以下的標記。

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>

選擇符#container > ul將只選擇id爲container的div的直接子代ul。它不匹配更深層的li的子代的ul。

所以，使用子代選擇符有性能上的優點。事實上，這一樣適用於基於css選擇器的javascript引擎。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

ul ~ p {  
   color: red;  
}

這是兄弟選擇符和X + Y同樣，然而，它沒有約束。與相鄰選擇符（ul + li）僅選擇前一個選擇符後面的第一個元素比起來，兄弟選擇符更寬泛。它會選擇，咱們上面例子中更在ul後面的任何p元素。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

a[title] {  
   color: green;  
}

被稱爲屬性選擇器，在咱們上面的例子裏，這隻會選擇有title屬性的錨標籤。沒有此屬性的錨標籤將不受影像。但若是你須要更多的特性怎麼辦呢？呵呵……

兼容性

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {  
  color: #1f6053; /* nettuts green */  
}

上面的代碼段將給全部href屬性爲http://net.tutsplus.com的錨標籤添加樣式；他們將會顯示爲咱們的品牌綠色。全部其餘的錨標籤將不受影響。

注意咱們將href值用引號包裹。記住，當使用javascript的css選擇符引擎時也這麼作。若是可能的話，儘量使用css3選擇符代替非官方的方法。

這工做的很好，但有點不夠靈活。若是連接確實直接鏈接到Nettus+還好，可是，也許路徑是到nettust的相對路徑呢？在這種狀況下，咱們可使用一點正則表達式語法。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

a[href*="tuts"] {  
  color: #1f6053; /* nettuts green */  
}

來了不是~這就是咱們須要的代碼。*號指定了包含該屬性的值必須包含定義的值。就是說，這句代碼包含了href值爲 nettuts.com，net.tutsplus.com或者tutsplus.com。
記住這個描述過於寬泛，若是是某個錨點標籤連接到某個鏈接中帶有tuts非Envato的網站（tutsplus屬於Envato旗下網站）呢？所以你須要更多特性來限制，分別使用^和&來限定字符串的開始和結束。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]

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

有沒有想過某些網站是如何定義一個圖標的連接的？我肯定你確定看到過。這些連接很容易讓你跳轉到另外一個網站。
使用^(carat)符灰常簡單啦。這個符號經常在正則表達式中表示字符串的開始。若是咱們想指向全部以"http"開頭的"href"屬性的錨點的話，咱們就可使用相似於上面的那段代碼啦。

注意啦，咱們不須要搜索"http://",徹底不必，由於咱們還要包含以https://開頭的連接呢。

若是咱們想爲全部連接到圖片的連接定義樣式咋辦？這種狀況下，咱們得搜索字符串的結束了不是。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {  
   color: red;  
}

又來了，咱們仍是使用正則表達式符號，$(dolor)，來做爲字符串的結束標記。這種狀況下，咱們就會搜索全部url以.jpg爲結尾的錨點啦。記住記住這種狀況下gif和png格式的圖片不會被選擇哦。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

a[data-filetype="image"] {  
   color: red;  
}

回顧最近一條，咱們如何能包含各類圖片類型:png,jpeg,jpg,gif?很容易想到，咱們能經過多個選擇器來不是，像這樣：

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
}

不過，這樣很蛋疼，效率極低。另外一個解決辦法是使用自定義屬性。若是咱們加了一種本身的 data-filetype 屬性給每個連接到圖片的錨點的話呢？

    <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

這樣關聯後，咱們就能使用標準的屬性選擇器來指定這些連接啦。看下面：

a[data-filetype="image"] {  
   color: red;  
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]

 a[data-info~="external"] {  
   color: red;  
}  
  
a[data-info~="image"] {  
   border: 1px solid black;  
}

這兒有個不爲人知的特殊技巧，絕對讓你印象時刻。~(tilda)符，它能夠幫助咱們指向那些以空格隔開多個值的屬性的元素（真拗口，這翻譯我本身都看不懂，水平問題）
以咱們第15條的自定義屬性爲例，上面的代碼中咱們建立了 data-info屬性，這個屬性能夠定義以空格分隔的多個值。這樣，這個連接自己就是個icon，而且指向的也是一個圖片連接，像下面這樣。

<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

17. X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}

這種僞類只會匹配已經被選中的單選元素。就是這麼簡單。

兼容性

E9+
Firefox
Chrome
Safari
Opera

18. X:after

before 和 after 僞類也很蛋疼。貌似人們天天都能找到或者發明一些新辦法來有效地使用它們。它們很容易控制選擇器周圍的內容。
不少第一次使用是由於他們須要對clear-fix進行改進。

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
    }  
  
.clearfix {   
   *display: inline-block;   
   _height: 1%;  
}

這個改進使用了:after僞類元素來在元素後增長一個空間，而後清除它。這個牛X的技巧你應該收藏到工具包裏，特別是當overflow:hidden方法無能爲力的時候。
想看看其餘創造性的用法：訪問我滴建立陰影的竅門

經過Css3選擇器的標準說明書，你應該有技巧地使用這些僞類語法——雙冒號::。不過爲了兼容，瀏覽器會接受一個雙引號。

兼容性

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

div:hover {  
  background: #e3e3e3;  
}

我去，這個你必須懂。典型的官方形式的用戶觸發僞類。聽起來會有點迷惑，不過實際上並不是如此。想在用戶在某個元素上面懸停時定義個特別的樣式？這個屬性就是作這個的。

記住啦，較old版本的IE，只能在錨點標籤後使用這個hover。

這個選擇器你用得最多的狀況，估計可能就是在錨點的懸停時加個border-bottom啦。

a:hover {  
 border-bottom: 1px solid black;  
}

小貼士： border-bottom:1px solid black;比 text-decoration:underline;好看一點哦。（真的？我去）

兼容性

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

div:not(#container) {  
   color: blue;  
}

not僞類灰常有用。例如我要選擇全部的div，除了有id爲container的。上面那個代碼片斷就能完美的實現。
若是我想選擇除了p之外的全部元素，我能夠這麼作：

*:not(p) {  
  color: green;  
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

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

這段代碼會找到全部段落，而後再從中定義這些段落的第一個字符。
這經常使用在仿報紙的文章首字母樣式。
指定p的首行樣式

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

一樣，這個::first-line僞元素會像咱們指望的那樣，只定義段落的第一行的樣式。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

li:nth-child(3) {  
   color: red;  
}

想一想那些無法從元素堆中選擇元素的日子。nth-child僞類解決了這個問題。
請注意 nth-child接收整數和變量，不過不是從0開始的，若是你想選定第二個li，使用 li:nth-child(2).
咱們甚至使用這個辦法來選擇任意的子元素。例如，咱們能夠用 li:nth-child(4n)來完成4爲倍數的全部元素的選擇。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {  
   color: red;  
}

若是我有灰常多的li在ul裏面，我只想要最後3個li怎麼辦？沒必要使用li:nth-child(397),你可使用nth-last-child僞類。
這種技巧和第六條几乎同樣有效，不過二者的不一樣之處在於它從結束開始收集，用回溯的方式進行。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

你應該有不少時候想要元素類型來選擇元素而不是經過孩子。
想象一下標記5個無序列表（UL）。若是你想定義第三個ul，而且沒有一個惟一的id來找到它，你就可使用 nth-of-type(3)僞類了。在上面這個代碼段中，只有第三個ul纔會有黑色的邊框。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
}

沒錯，咱們同樣可使用nth-last-of-type來從結束開始回溯這個選擇器，來找到咱們想要的元素

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

ul li:first-child {  
   border-top: none;  
}

這個結構的僞類讓咱們能夠選擇某個元素的第一個子孩子。你一般可使用這個辦法來刪除第一個或者最後一個元素的邊框。
例如，你有一系列的rows，每個都有border-top 和border-bottom。這種狀況下，第一行和最後一行看起來會灰常怪。
不少設計師會使用first和last類來彌補這個缺陷。相反，你可使用這些僞類來解決這些問題。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

ul > li:last-child {  
   color: green;  
}

與first-child相反，last-child會選擇父節點的最後一個子節點。
例子：
咱們創建一些例子來示範這些類的可能的用法。咱們會創建一種風格來展現。
標記

<ul>  
   <li> List Item </li>  
   <li> List Item </li>  
   <li> List Item </li>  
</ul>

沒啥特別的，就是一個簡單的序列。
Css

ul {  
 width: 200px;  
 background: #292929;  
 color: white;  
 list-style: none;  
 padding-left: 0;  
}  
  
li {  
 padding: 10px;  
 border-bottom: 1px solid black;  
 border-top: 1px solid #3c3c3c;  
}

這個樣式會設置一個背景，刪除瀏覽器默認的ul的padding值，並定義邊框給每個li來提供一點深度。

如上圖所示，惟一的問題是最上面的邊框和最下面的邊框看起來有點兒怪。讓咱們來使用:first-child和:last-child來解決這個問題。

li:first-child {  
    border-top: none;  
}  
  
li:last-child {  
   border-bottom: none;  
}

看上圖，解決了不是。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

是滴，IE8支持 first-child 不過不支持last-child。

28. X:only-child

div p:only-child {  
   color: red;  
}

實話說，你極可能會發現你不會常用 only-child僞類。儘管如此，它確實有用，你應該須要它。
它能夠幫助你選擇是父節點的獨生子（沒別的孩子啦）的元素。例如，使用上面的代碼，只有是div的惟一子孩子的p段落纔會定義其顏色爲red。
讓咱們來假定下面的標記。

<div><p> My paragraph here. </p></div>  
  
<div>  
   <p> Two paragraphs total. </p>  
   <p> Two paragraphs total. </p>  
</div>

這樣，第二個div的p標籤的內容不會被選中。只有第一個div的p纔會被選中。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

li:only-of-type {  
   font-weight: bold;  
}

這種結構的僞類有幾種灰常聰明的用法。它能夠選定在其父節點內沒有兄弟節點的元素。例如，咱們能夠選擇只有一個li做爲其子孩子的ul。
首先，取決於你想怎樣完成這一目標。你可使用 ul li，不過，這回選擇全部li元素。惟一的辦法是使用only-of-type。

ul > li:only-of-type {  
   font-weight: bold;  
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

first-of-type 僞類可讓你選擇該類型的第一個兄弟節點。
一個測試
爲了更好地理解它，讓咱們來測試一下啊。拷貝下面的標記到你的編輯器。

<div>  
   <p> My paragraph here. </p>  
   <ul>  
      <li> List Item 1 </li>  
      <li> List Item 2 </li>  
   </ul>  
  
   <ul>  
      <li> List Item 3 </li>  
      <li> List Item 4 </li>  
   </ul>     
</div>

如今，別急着往下讀，試試看如何能只選擇'LIST ITEM 2'?若是你搞定了（或者放棄了），繼續讀。

解決辦法1

有不少辦法能搞定這個測試。咱們回顧其中一小部分。以使用first-of-type開始。

ul:first-of-type > li:nth-child(2) {  
   font-weight: bold;  
}

這個代碼段本質上表示，「找到第一個無序列表，而後找到這裏面的li，而後，繼續使用過濾器直到找到第二個li。

解決辦法2

另外一個可行的辦法是毗鄰選擇器。

p + ul li:last-child {  
   font-weight: bold;  
}

在這個方案中，咱們找到p的臨近節點ul，而後找到ul的li的最後一個孩子。

解決辦法3

咱們能夠爲所欲爲滴選擇這些選擇器。

ul:first-of-type li:nth-last-child(1) {  
   font-weight: bold;     
}

此次，咱們取到第一個ul，而後找到第一個元素，不過是從最後一個開始數。哈哈。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

結論

若是你仍在爲解決old瀏覽器的缺陷而糾結，如IE6。在使用這些新的選擇器方面，你仍然須要很是當心。不過，別由於這個阻礙了你對這些新玩意兒的學習。別虐待本身。確保關注這裏的兼容性列表。應一方面，你可使用 Dean Edward's excellent IE9.js script 來爲舊瀏覽器提供新的選擇器支持。（我去。cool）
其次，當使用javascript庫時，如流行的jQuery，最好儘量使用這些css3自己的選擇器而不是使用庫的自定義方法/選擇器。這能讓你的代碼更快哦，由於這些選擇器引擎自己就能被瀏覽器解析，而不是用這些庫選擇器。
感謝閱讀，但願你能學到一兩個技巧。

譯者注

本文問翻譯文章，原文爲「The 30 CSS Selectors you Must Memorize」

支持我繼續翻譯吧。

更多文章請訪問的個人博客。

關注個人微博吧。

相關文章

相關標籤/搜索

你必須知道的.NET

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<