選擇器 · 前端筆記

[TOC] ![](https://box.kancloud.cn/320b919f3f976c8b4fc5a7644f5a691c_1915x3096.jpg) # 選擇器 ## * - 通配選擇器星號*代表通配選擇器，可以與任何元素匹配。許多開發者會使用這個技巧來把margin和padding都設為0。在快速開發測試中這種設置固然是好的，但我建議絕對不要在最終的產品代碼中使用。因為會給瀏覽器增加大量不必要的負荷。 ~~~ *{color: red;} ~~~ 兼容的瀏覽器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## # - ID選擇器 ID選擇器用于選擇一個元素。使用＃號作為前綴可以選擇該id的元素。這是最常見的用法，但使用id選擇器時要謹慎。 ~~~ #container { width: 960px; margin: auto; } ~~~ 問問自己：是否真的需要使用id來定義元素的樣式？ > 在實際中，瀏覽器并不會檢查ID的唯一性，設置多個ID，可以為這些具有相同ID的元素應用相同樣式，但在編寫DOM腳本時只能識別該id的第一個元素。兼容的瀏覽器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## . - 類選擇器類選擇器用于選擇一類元素。 ~~~ .div{color: red;} ~~~ 兼容的瀏覽器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X Y - 后代選擇器當你需要更精確地定位時，可以使用后代選擇器 ~~~ li a { text-decoration: none; } ~~~ > 如果你的選擇器看起來像X Y Z A B.error這樣就錯了。問問自己是否真的需要加入這么多負荷兼容的瀏覽器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X - 元素選擇器 ~~~ a { color: red; } ul { margin-left: 0; } ~~~ 兼容的瀏覽器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X + Y - 鄰近元素選擇器只會選中緊接在另一個元素后的元素。 ~~~ // 只有每個ul后面的第一個段落是紅色的 ul + p { color: red; } ~~~ 兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X > Y - 子元素選擇器 X Y和X > Y的區別是后者只會選中直接后代。 ~~~ // #container > ul 只會定義id為container的div里的ul元素 // 而不會定義第一個li里的ul div#container > ul { border: 1px solid black; } <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> ~~~ 兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X ~ Y - 兄弟選擇器選擇器 X 之后出現的所有 Y。兩種元素必須擁有相同的父元素，但是 Y 不必直接緊隨X。兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X[Y] - 屬性選擇器 ~~~ // 帶有title屬性的鏈接標簽才會被匹配。沒有title屬性的標簽不會受到影響。 a[title] { color: green; } ~~~ 兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera ### X[href*="nettuts"] - 模糊匹配屬性選擇器 ### X[href^="http"] - 前綴屬性選擇器 ### X[href$=".jpg"] - 后綴屬性選擇器 ### X[data-*="foo"] - 自定義屬性選擇器 ~~~ a[data-filetype="image"] { color: red; } <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> ~~~ ### X[foo~="bar"] - 部分屬性選擇器波浪符號（~）可以讓你定義取值帶有空格的屬性。 ~~~ /* 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; } <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> ~~~ ## 偽元素選擇器 ### X:first-letter - 設置首字母樣式所有前導標點符號應與第一個字母一同應用該樣式；只能與塊級元素關聯；只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-letter中存在連接符的原因 ### X:first-line - 設置首行樣式只能與塊級元素關聯；只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-line中存在連接符的原因 ### X:before - 在元素內容前面插入內容默認這個偽元素是行內元素，繼承元素可繼承的屬性；所有元素都必須放在出現該偽元素的選擇器的最后面。兼容的瀏覽器 * IE8+ * Firefox * Chrome * Safari * Opera ### X:after - 在元素內容后面插入內容兼容的瀏覽器 * IE8+ * Firefox * Chrome * Safari * Opera ## 偽類偽類順序：link-visited-focus-hover-active ### 靜態偽類(只應用于超鏈接) #### X:visited and X:link :link偽類來定義所有還沒點擊的鏈接。 :visited偽類可以讓我們給曾經點擊過或者訪問過的鏈接添加樣式。兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera ### 動態偽類(可應用于任何元素) #### X:hover 鼠標停留兼容的瀏覽器 * IE6+ （只能用于鏈接標簽） * Firefox * Chrome * Safari * Opera #### X:active 點擊未松開時 #### X:focus 獲取焦點時 ### 目標偽類 #### X:target 代表一個唯一的頁面元素(目標元素)，其id 與當前URL片段匹配 . ~~~ /* 選擇一個ID與當前URL片段匹配的元素*/ :target { border: 2px solid black; } ~~~~ <br> 例如, 以下URL擁有一個片段 (以#標識的) ，該片段指向一個ID為section2的頁面元素: ~~~html http://www.example.com/index.html#section2 ~~~ 若當前URL等于上面的URL，下面的元素可以通過 :target選擇器被選中： ~~~html <section id="section2">Example</section> ~~~ 兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera ### UI元素偽類兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:check - 選中定義選中（checked）的元素，比如單選按鈕（radio）或多選按鈕（checkbox） #### X:enabled - 可用狀態 #### X:disabled - 不可用狀態 ### 否定偽類 #### X:not(selector) ~~~ // 我希望選中所有的div元素，除了一個id為container的div div:not(#container) { color: blue; } ~~~ 兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera ### 結構偽類 #### X:first-child 父元素的第一個子元素,且該子元素是X，與E:nth-child(1)等同兼容的瀏覽器 * IE7+ * Firefox * Chrome * Safari * Opera #### X:last-child 父元素的最后一個子元素，且該子元素是X，與X:nth-last-child(1)等同兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera #### :root 選擇文檔的根元素，即<html>元素 #### X Y:nth-child(n) 選擇父元素的第n個子元素，父元素是X，子元素是Y 兼容的瀏覽器 * IE9+ * Firefox 3.5+ * Chrome * Safari #### X Y:nth-last-child(n) 選擇父元素的倒數第n個子元素，父元素是X，子元素是Y 兼容的瀏覽器 * IE9+ * Firefox 3.5+ * Chrome * Safari * Opera #### X Y:nth-of-type(n) 選擇父元素的具有指定類型的第n個子元素，父元素是X，子元素是Y 兼容的瀏覽器 * IE9+ * Firefox 3.5+ * Chrome * Safari #### X Y:nth-last-of-type(n) 選擇父元素的具有指定類型的倒數第n個子元素，父元素是X，子元素是Y 兼容的瀏覽器 * IE9+ * Firefox 3.5+ * Chrome * Safari * Opera #### X:first-of-type 選擇父元素中具有指定類型的第1個子元素，與X:nth-of-type(1)相同兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:last-of-type 選擇父元素中具有指定類型的最后1個子元素，與X:nth-last-of-type(1)相同 #### X:only-child 選擇父元素中只包含一個子元素，子元素是X 兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:only-of-type 選擇父元素中只包含一個同類型的子元素，子元素是X 兼容的瀏覽器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:empty 選擇沒有子元素的元素，而且該元素也不包含任何文本節點 #參考資料 [選擇器 · FE-booklet](https://www.xiaohuochai.site/CSS/grammar/grammar_selector.html) [30個你必須熟記的CSS選擇器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048)