選擇器 · 前端

[TOC] [CSS 選擇器 | 菜鳥教程 (runoob.com)](https://www.runoob.com/cssref/css-selectors.html) # **all** 將除卻 unicode-bidi 與 direction 之外的所有屬性重設至其初始值，或繼承值。『IE不支持』 ~~~ /* 全局 */ //改變該元素或其父元素的所有屬性至初始值 all: initial //改變該元素或其父元素的所有屬性的值至他們的父元素屬性的值 all: inherit //如果該元素的屬性的值是可繼承的，則改變該元素或該元素的父元素的所有屬性的值為他們父元素的屬性值，反之則改變為初始值 all: unset /* CSS Cascading and Inheritance Level 4 */ all: revert; ~~~ # **基本選擇器** 元素選擇器： ```css div,p{} ``` 某個類指定的標簽 ``` /*ul.nav-lis*/ ul.nav-list{ } ``` 通配選擇器(*)： ~~~css li[data-value] *[lang^=en]{color:green;} *.warning {color:red;} *#maincontent {border: 1px solid blue;} ~~~ # **模糊匹配** 可匹配到div,class為“-btn”結尾的元素 ``` div[class$="-btn"]:active{ opacity:.8 } ``` 可匹配到div,id為“item-”開頭的元素 ``` div:[id^="item-"]{ color:red } ``` \*=表示模糊匹配，[href*="163"]可以匹配href="163.com"、href="mail.163.com"等元素；選擇每一個src屬性的值包含子字符串"runoob"的元素 ``` a[src*="runoob"] ``` \[attribute~=value\] 屬性中包含獨立的單詞為 value，例如： ~~~ [title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" /> ~~~ # **類與id選擇器** ```css .classname{} #idname{} ``` # **屬性選擇器** 選擇name屬性等于value的元素 ``` [name=value] ``` 選擇 lang 屬性等于 en，或者以 en- 為開頭的所有元素 ``` [lang|=en] ``` 選擇標題屬性包含單詞"flower"的所有元素 ``` [title~=flower] ``` # **倍數** ``` div:nth-child(2n+1) 選擇2倍的第二個元素： div:nth-child(2n+2) 選擇3倍的第一個元素： div:nth-child(3n+1) 選擇3倍的第二個元素： div:nth-child(3n+2) 選擇3倍的第三個元素： div:nth-child(3n+3) ``` # **組合選擇器** 相鄰選擇器：A+B 同輩選擇器：A~B 兒子選擇器：A >B 后代選擇器:A B ``` <body> <div> <div id="i1" class="con1" data-a="a" disabled=true>1111111</div> <div id="i2" class="con1" data-a="a" disabled=true>2222</div> <div id="i3" class="con1 con2" data-a="a" disabled=true>3333</div> </div> <script type="text/javascript"> $(function($) { console.log($("div[class=con1][data-a=a]"));//div#i1,div#i2 console.log($("div.con2[data-a=a]"));//div#i3 console.log($("div.con1[data-a=a]"));//div#i1,div#i2,div#i3 console.log($("div[class=con1][disabled=true]"));//div#i1,div#i2 console.log($("div.con2[disabled=true]"));//div#i3 console.log($("div.con1[disabled=true]"));//div#i1,div#i2,div#i3 console.log($(".con1.con2[disabled=true]"));//div#i3 }) </script> </body> ``` ## 獲取input不為disabled的對象 ``` $("input[id^='input_001']:not(:disabled)").each(function(){ console.log(this); }); ``` # **偽類** ## **:link** 用來選中元素當中所有尚未訪問的鏈接【IE3】 ## **:visited** 用來選中元素當中所有已經訪問過的鏈接【IE7】 ## **:hover** 選中鼠標指向的元素【IE7】 ## **:active** 匹配被用戶激活的元素,偽類一般被用在 a 和 button 或者label關聯的表單元素中它代表的是用戶按下按鍵和松開按鍵之間的時間。【IE4只支持鏈接，IE8只支持所有元素】 >[danger]多個偽類時放置在最后，偽類先后順序被稱為 LVHA 順序：:link — :visited — :hover — :active。 ~~~html <style type="text/css"> form :active { color: red; } form button { background: white; } </style> <form> <label for="my-button">My button: </label> <button id="my-button" type="button">Try Clicking Me or My Label!</button> </form> ~~~ ```html <style type="text/css"> a:link { color: blue; } /* 未訪問鏈接 */ a:visited { color: purple; } /* 已訪問鏈接 */ a:hover { background: yellow; } /* 用戶鼠標懸停 */ a:active { color: red; } /* 激活鏈接 */ p:active { background: #eee; } /* 激活段落 */ </style> <div style="width: 400px;height: 80px;border: 1px solid red"> <p > <a href="#" >快點我就字會變紅.鼠標懸停背景變黃</a> 段落或者段落上的a鏈接鼠標按下不松開背景就會變灰 </p> </div> ``` ## **:focus** 當用戶點擊或觸摸元素或通過鍵盤的 “tab” 鍵選擇它獲得焦點時會被觸發（用于表單）【IE8】 ## **:checked** 表示任何處于選中狀態的radio(`<input type="radio">`), checkbox(`<input type="checkbox">`) 或select元素中的option【IE9】 ## **:targe** 代表一個唯一的頁面元素(目標元素)，其id?與當前URL片段匹配，即匹配錨點對應的焦點目標元素【IE9】 ``` <style> :target{ background-color: pink; } </style> <body> <a href="#html">點擊</p> <p id="html">HTML中文網</p> </body> ``` 點擊錨點，則跳轉到目標元素且目標元素背景顏色改變 ![](https://img.kancloud.cn/0f/83/0f83a0f42a384b4bc94b70a9602499bf_177x96.png) ## **:disabled** 匹配任何被禁用的元素（如果一個元素不能獲取焦點或者不能被激活（如選擇、點擊或接受文本輸入），則該元素處于被禁用狀態）【IE9】 ~~~html input[type="text"]:disabled { background: #ccc; } <input type="text" placeholder="Name" disabled> ~~~ ## **:enabled** 與上一個相反，匹配任何被啟用的（enabled）元素 ~~~css /* 選擇任何啟用狀態的 <input> */ input:enabled { color: blue; } ~~~ ## **:empty** 匹配沒有子元素的元素。子元素只可以是元素節點或文本（包括空格）【IE9】 ``` td[contenteditable='true']:empty::before{ color: grey; background-color: rgba(236,236,236,.075); display:block; content:"不同項目用,分隔"; } td[contenteditable='true']:focus::before{ content: none; } ``` >[danger]帶-child與-type的唯一區別是，帶-child必須要有父級元素 ## **:first-child** 必須有父元素的情況下兄弟元素中的第一個子元素（為了兼容必須有父元素）【IE7】 IE7不能動態添加樣式，IE8在失去焦點前不能添加 ``` <style type="text/css"> p:first-child{ background-color: red; } </style> <div style="width: 400px;height: 120px;border: 1px solid red"> <p>測試文本！</p> <p lang="en">測試文本！</p> <p lang="zh-cn">測試文本！</p> </div>  <p>測試文本！</p> <p lang="en">測試文本！</p> <p lang="zh-cn">測試文本！</p> ``` ## **:last-child** 在有父元素的情況下，匹配匹配指定的一組同輩元素中的最后一個元素【IE9】 p:last-child等同于p:nth-last-child(1) ``` <style type="text/css"> p:last-child{ background-color: red; } </style> <div style="width: 400px;height: 120px;border: 1px solid red"> <p>測試文本！</p> <p lang="en">測試文本！</p> <p lang="zh-cn">測試文本！</p> </div> ``` ## **:nth-last-child(n)** 在有父元素的情況下，匹配匹配指定的一組同輩元素中倒數第N個元素【IE9】 ## **:nth-child(n)** 在有父元素的情況下，匹配指定的一組同輩元素中指定的元素【IE9】注意：Opera 不能處理動態插入的元素 ``` <style type="text/css"> p:nth-child(1){ background-color: red; } </style> <div style="width: 400px;height: 120px;border: 1px solid red"> <p>測試文本！</p> <p lang="en">測試文本！</p> <p lang="zh-cn">測試文本！</p> </div> 同輩元素tr中的偶數行 tr:nth-child(even) 同輩元素tr中的奇數行 tr:nth-child(odd) 同輩元素span中為第一的并且名字為span的標簽被選中 span:nth-child(1) 匹配前三個子元素中的span元素。 span:nth-child(-n+3) ``` ## **:first-of-type** 匹配特定類型的一組同輩元素中第一個子元素，和:nth-of-type(1)效果一致【IE9】注意IE將所有未知元素（如自定義元素）看作同一元素類型 ``` //匹配p標簽下的第一個元素 <style type="text/css"> p:first-of-type{ background-color: red; } </style> <p>測試文本1！</p> <p lang="en">測試文本2！</p> <p lang="zh-cn">測試文本3！</p> <div> <p>測試1</p> <p>測試2</p> <p>測試3</p> </div> ``` ## **:last-of-type** 匹配特定類型的一組同輩元素中的最后一個子元素。和:nth-last-of-type(1)效果一樣【IE9】 ## **:nth-of-type(n)** 匹配同類型中的第n個同級兄弟元素【IE9】 ``` <style> p:nth-last-of-type(2) { background:pink; } </style> <h1>元素1</h1> <p>元素2</p> <p>元素3</p> <p>元素4</p> ``` ## **:nth-last-of-type(n)** 匹配指定同輩元素下的倒數第n個元素 ``` <style> p:nth-last-of-type(1) { background:pink; } </style> <h1>元素1</h1> <p>元素2</p> <p>元素3</p> <p>元素4</p> ``` ## **:only-child** 在有父級元素情況下，匹配沒有任何兄弟元素的元素【IE9】 ## **:only-of-type** 匹配沒有任何兄弟元素的元素【IE9】 >[danger]帶-child與-type的唯一區別是，帶-child必須要有父級元素 ## **:not()** 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類【IE9】能作為:not()參數的可以是以下任何一種的簡單選擇器： 1、標簽選擇器（例如p，span等） 2、類選擇（例如.element，.sidebar等） 3、ID選擇器（例如#header） 4、偽類選擇器（例如:first-child，:last-of-type） 5、屬性選擇器（例如[type="checkbox"]） 6、通用選擇器（*） ``` article:not(#featured):not(.tutorial) { /* 格式化文章 */ } li ：not(.old)::after { content："" ; color：red; } ``` 傳遞給:not()的參數不能是偽元素選擇器（例如::before和::after等）或另一個否定偽類選擇器所以以下是無效的:not()： ``` /* 無效 */ p:not(:not(.same)) {}//:not()不能被嵌套 p:not(:not(:last-child)) {} :not(::first-letter) {} a:not(::after) {} selector（:matches(:not(..)) ``` :not()偽類選擇允許寫入無用的選擇。例如:not(\*)，它根本不代表任何元素將永遠不會應用任何樣式。 ## **:root** 匹配文檔樹的根元素。對于 HTML 來說，:root 表示 html 元素，除了優先級更高之外，與 html 選擇器相同【IE9】 ## **:lang()** 基于元素語言來匹配頁面元素【IE8】 ~~~html <html lang="zh-cn"> <body> <style type="text/css"> p:lang(en){ background-color:#66cdcc; color:red; } p:lang(zh-cn){ background-color:#66cdcc; color:blue; } </style> <div style="width: 400px;height: 120px;border: 1px solid red"> <p>測試文本！</p> <p lang="en">測試文本！</p> <p lang="zh-cn">測試文本！</p> </div> </body> </html> ~~~ ![](https://img.kancloud.cn/27/05/2705d32338e75a9ded831f1a0c29f9c9_207x114.png) ## **:valid** 內容驗證正確的input或其他form元素。這能簡單地將校驗字段展示為一種能讓用戶辨別出其輸入數據的正確性的樣式【IE10】 ## **:invalid** 表示任意內容未通過驗證的 input或其他 form 元素 .這個偽類對于突出顯示用戶的字段錯誤非常有用【IE10】 ## **:required** 表示任意設置了required屬性的input，select, 或 textarea元素。這個偽類對于高亮顯示在提交表單之前必須具有有效數據的字段非常有用。 >[danger]注意：:optional偽類選中'可選的'表單字段。【IE10】 ## **:optional** 表示任意沒有required屬性的 input，select 或 textarea元素使用它。【IE10】 ~~~html <style> input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #C00000; } </style> <form> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> <br /> <br /> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required/> </form> ~~~ ## **:default** 表示一組相關元素中的默認表單元素【IE不支持】該選擇器可以在` <button>`, `<input type="checkbox" checked>`, `<input type="radio" checked>`, 以及 `<option selected>` 上使用 ```html <style type="text/css"> input:default { box-shadow: 0 0 2px 1px coral; color: coral; } option:default { color: coral; } button:default { color: coral; } button:disabled { color: blue; } </style> <form> <input type="checkbox" name="" checked> <input type="radio" name="" checked> <select> <option value="1">1</option> <option value="2" selected = "selected">2</option> </select>  <button type="button" disabled>確定</button> </form> ``` ## **:defined** 表示任何已定義的元素【IE不支持】這包括任何瀏覽器內置的標準元素以及已成功定義的自定義元素 (例如通過 CustomElementRegistry.define() 方法)。 ## **:focus-within** 表示一個元素獲得焦點，或，該元素的后代元素獲得焦點【IE不支持】舉個例子：表單中的某個input字段獲得焦點時，整個表單的form元素都可被高亮。 ~~~css form:focus-within { background: #ff8; color: black; } ~~~ ## **:host** 選擇包含其內部使用的CSS的shadow DOM的根元素?- 換句話說，這允許你從其shadow DOM中選擇一個自定義元素【IE不支持】 ## **:host()**【IE不支持】 ## **:indeterminate** 狀態不確定的表單元素【IE不支持】即多選框checkbox的indeterminate屬性被js設置為true 多個name相同的單選框radio都未被選中處于不確定狀態的progress標簽 ## **:in-range** 代表一個 input 元素，其當前值處于屬性min 和max 限定的范圍之內.【IE不支持】 ~~~html <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> ~~~ ## **:out-of-range** 表示一個 input 元素，其當前值處于屬性 min 和 max 限定的范圍外。【IE不支持】 ## **:placeholder-shown** 在 input> 或 <textarea 元素顯示 placeholder text 時生效.【IE10】 >[danger]ie10可用條件是`:-ms-input-placeholder`, firefox 4-5版本可用條件是`:-moz-placeholder` ## **:read-only** 表示元素不可被用戶編輯的狀態（如鎖定的文本輸入框）。【IE不支持】 ## **:scope** 作為選擇器要匹配的參考點的元素【IE不支持】 ## **:where()** CSS 偽類函數接受選擇器列表作為它的參數，將會選擇所有能被該選擇器列表中任何一條規則選中的元素。 :where() 和 :is() 的不同之處在于，:where() 的優先級總是為 0 ，但是 :is() 的優先級是由它的選擇器列表中優先級最高的選擇器決定的【只有谷歌支持】 ## **:read-write** 代表一個元素（例如可輸入文本的 input元素）可以被用戶編輯。【IE不支持】 ## **@page:right** 需要和@規則 @page 配套使用, 表示打印文檔的所有右頁。.【Firefox不支持】 ## **@page:first** 打印文檔的時候，第一頁的樣式【多數瀏覽器不兼容】【Firefox不支持】 ## **@page:left** 需要和@規則 @page 配套使用, 對打印文檔的左側頁設置CSS樣式.【Firefox不支持】 # **實驗性質的偽類** ## **:any-link** ## **:blank** ## **:current** ## **:dir()** ## **:drop** ## **:fullscreen** ## **:future** ## **:focus-visible** ## **:has()** ## **:host-context()** ## **:is()** ## **:local-link** ## **:nth-col()** ## **:nth-last-col()** ## **:past** ## **:target-within** ## **:user-invalid** ### 偽元素示例 #### 選前四個元素： ``` #nth-test div:nth-child(-n + 4) { background-color: red; } ``` #### 選第3個往后的所有元素： ``` #nth-test div:nth-child(n + 3) { background-color: red; } ``` #### 選偶數元素： ``` #nth-test div:nth-child(2n) { background-color: red; } ``` #### 選奇數元素： ``` #nth-test div:nth-child(2n+1) { background-color: red; } ``` #### 選中最后三個元素： ``` div:nth-last-child(-n+4){} ``` >[danger]**注意：上面括號里面的n必須要放在數字的前面，比如說你寫(1+n)就會報錯，只有(n+1)才對** # **偽元素** ：是css2引入：：是css3引入：：符號是用來區分偽類和偽元素的 ## **::after (:after)** 創建一個偽元素，作為已選中元素的最后一個子元素。通常會配合content屬性來為該元素添加裝飾內容。這個虛擬元素默認是行內元素【IE9】 >[danger] IE8支持element:after{...} 我們可以看到很多類型的input都不支持偽類，buttom 、 number 、text 、 email 、datetime、url、tel、search、reset、password、hidden等等 select好像也不行例：在a鏈接后添加一個元素，這個元素的內容為→ ~~~ a::after { content: "→" ~~~ ``` <ul> <li>Item 1</li> <li>Item 2</li> </ul> li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } ``` ![](https://img.kancloud.cn/ba/76/ba765be5f410204c9b14f09852554189_140x82.png) 例子：`.box3::after`將作為.box3的最后一個子元素 ``` <style type="text/css"> .box3::after{ content: ""; display: block; width: 100px; height: 100px; border: 1px solid deeppink; } </style> <div class="box3"></div> ``` ![](https://img.kancloud.cn/6a/7c/6a7ce9ac43eb19caa1d51e8c5205cd8e_165x87.png) ## **::before (:before)** 創建一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素添加修飾性的內容。此元素默認為行內元素【IE9】 >[danger] IE8支持element:after{...} ~~~ a::before { content: "?" ~~~ ## **::cue (:cue)** 匹配所選元素中的WebVTT提示。這可以用于在VTT軌道的媒體中使用字幕和其他線索。【IE不支持】 ## **::first-letter (:first-letter)** 選中某塊級標簽元素第一行的第一個字母，并且文字所處的行之前沒有其他內容（如圖片和內聯的表格）【IE9】 ~~~css /* 使每段開頭的第一個字母變紅變大 */ p::first-letter { /* 使用:first來兼容IE8- */ color: red; font-size: 130%; } ~~~ ## **::first-line (:first-line)** 在某塊級元素的第一行應用樣式。第一行的長度取決于很多因素，包括元素寬度，文檔寬度和文本的文字大小。和其他所有的偽元素一樣，::first-line 不能匹配任何真實存在的html元素【IE9】 ~~~css  p::first-line { text-transform: uppercase } ~~~ ## **::selection** 應用于文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）【IE9】 >[danger]注意：只有以下幾個css才生效 color,background-color,cursor,caret-color,outline and its longhands,text-decoration 及相關屬性,text-emphasis-color,text-shadow ``` ::selection { color:green; } span ::selection { color:green; } ``` ## **::slotted()** 用于選定那些被放在 HTML模板中的元素【IE不支持】 ## **實驗性質的偽元素** ## **::backdrop** ## **::grammar-error** ## **::marker** ## **::placeholder** ## **::spelling-error** ## **示例** button[lichihua] 選取有lichihua的自定義屬性的button標簽元素 ``` <button lichihua="disabled">lichihua</button> ``` button[disabled] 選取有disabled屬性的button標簽元素 ``` <button disabled="disabled">lichihua</button> ``` input[type="submit"][disabled] 選取type="submit"并且有disabled屬性的input標簽元素 ``` <input type="submit" disabled="disabled" name="" value="確定"> ``` input.form-submit.disabled（擁有form-submit和disabled類的input）注意 input.form-submit這里的input和點之間沒有空格！！！！ input[type="submit"].disabled （擁有disabled類并且type屬性為submit的input） input.form-submit[disabled] （擁有form-submit類并且擁有disabled屬性的input） input[type="submit"][disabled] （type屬性為submit 并且擁有disabled屬性的input） <input type="submit" class="form-submit disabled" disabled="disabled" name="" id="editgroup" value="編輯角色組"> CSS3中，合理的使用通配符，可以大大提高效率，以下為測試示例。 “^”開頭字母匹配；“$”結尾字符匹配；“*”包含字符匹配對于類似下面的樣式：可以用通配符 #name_1{margin-top:10px} #name_2{margin-top:10px} #name_3{margin-top:10px} #name_4{margin-top:10px}，可寫作[id^="name_"]{margin-top:10px}