[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> ``` 版本：元素選擇 作用：元素選擇 ``` <br/> # <b style="color:#4F4F4F;">權重優先級</b> <br/> # <span style="color:#619BE4">權重計算</span> ***** 權重計算 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 第一等級：代表 內聯樣式，如 style=""，權值為 1,0,0,0； 第二等級：代表 ID選擇器，如 #id="", 權值為 0,1,0,0； 第三等級：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 0,0,1,0； 第四等級：代表 標簽 | 偽元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權值 0,0,0,1； 此外，通用選擇器（*），子選擇器（>）， 相鄰同胞選擇器（+）等選擇器不在4等級之內，所以它們的權值都為 0,0,0,0； 權值計算 公式： 權值 = 第一等級選擇器*個數，第二等級選擇器*個數，第三等級選擇器*個數，第四等級選擇器*個數； ```  ``` 總結，這個比較規則就是三點 1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推； 2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋）； 3.css屬性后面加 !important 時，無條件絕對優先（比內聯樣式還要優先）； ``` <br/> # <b style="color:#4F4F4F;">分割符號</b> <br/> # <span style="color:#619BE4">,</span> ***** 多項選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` element,element ``` <br/> # <span style="color:#619BE4">[空格]</span> ***** 子級選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` element element ``` <br/> # <span style="color:#619BE4">\></span> ***** 直接子集選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` element>element ``` <br/> # <span style="color:#619BE4">+</span> ***** 兄弟選擇器，只能選擇到相鄰的兄弟 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` element+element ``` <br/> # <span style="color:#619BE4">[無符號]</span> ***** 同一個元素同時滿足多個類 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` elementelement ``` <br/> # <span style="color:#619BE4">~</span> ***** 選擇前面有 某個元素的每個 標簽，也可以說選擇某個標簽之后的所有子元素。 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` element1~element2 ``` <br/> # <b style="color:#4F4F4F;">普通選擇器</b> <br/> # <span style="color:#619BE4">.class</span> ***** 類選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇 class="intro" 的所有元素。 .intro ``` <br/> # <span style="color:#619BE4">#id</span> ***** ID選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇 id="firstname" 的所有元素。 #firstname ``` <br/> # <span style="color:#619BE4">*</span> ***** 全部選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇所有元素。 * ``` <br/> # <span style="color:#619BE4">element</span> ***** 元素標簽選擇器 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇所有 <p> 元素。 p ``` <br/> # <b style="color:#4F4F4F;">屬性選擇器</b> <br/> # <span style="color:#619BE4">[attribute]</span> ***** 選擇擁有某個屬性的元素 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇帶有 target 屬性所有元素。 [target] ``` <br/> # <span style="color:#619BE4">[attribute=value]</span> ***** 選擇擁有某個屬性等于某個值的元素 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇 target="_blank" 的所有元素 [target=_blank] ``` <br/> # <span style="color:#619BE4">[attribute~=value]</span> ***** 選擇擁有某個屬性包含某個值的元素，只有當多個單詞存在且單詞之間用空格分隔的時候有效 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇 title 屬性包含單詞 "flower" 的所有元素。 [title~=flower] ``` <br/> # <span style="color:#619BE4">[attribute*=value]</span> ***** 選擇擁有某個屬性包含某個值的元素 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。 a[src*="abc"] ``` <br/> # <span style="color:#619BE4">[attribute|=value]</span> ***** 選擇擁有某個屬性包含某個值開頭的元素，單詞可以用-進行分割可以被選擇到 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇 lang 屬性值以 "en" 開頭的所有元素。 [lang|=en] ``` <br/> # <span style="color:#619BE4">[attribute^=value]</span> ***** 選擇擁有某個屬性包含某個值開頭的元素 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。 a[src^="https"] ``` <br/> # <span style="color:#619BE4">[attribute$=value]</span> ***** 選擇擁有某個屬性某個值結尾的元素 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。 a[src$=".pdf"] ``` <br/> # <b style="color:#4F4F4F;">偽類</b> <br/> # <span style="color:#619BE4">:root</span> ***** 選擇文檔的根元素 <br/> # <span style="color:#619BE4">:scope</span> ***** 表示作為選擇器要匹配的參考點的元素 <br/> # <span style="color:#619BE4">:empty</span> ***** 選擇每個沒有任何子級的元素（包括文本節點） <br/> # <span style="color:#619BE4">:not(selector)</span> ***** 選擇每個并非p元素的元素 <br/> # <span style="color:#619BE4">:where(selector)</span> ***** 選擇所有能被該選擇器列表中任何一條規則選中的元素 <br/> # <span style="color:#619BE4">:is(selector)</span> ***** 將選擇器列表作為參數，并選擇該列表中任意一個選擇器可以選擇的元素。這對于以更緊湊的形式編寫大型選擇器非常有用 <br/> # <span style="color:#619BE4">:has(selector)</span> ***** 其給定的選擇器參數（相對于該元素的 :scope）至少匹配一個元素 <br/> # <span style="color:#619BE4">:lang(language)</span> ***** 選擇一個lang屬性的起始值的所有元素 <br/> # <span style="color:#619BE4">:host(selector)</span> ***** 選擇ShadowRoot元素，僅當它與選擇器參數匹配 <br/> # <span style="color:#619BE4">:link</span> ***** 選擇所有未訪問鏈接 <br/> # <span style="color:#619BE4">:any-link</span> ***** 選擇任何有訪問鏈接的元素，包括link，area，a <br/> # <span style="color:#619BE4">:visited</span> ***** 選擇所有訪問過的鏈接 <br/> # <span style="color:#619BE4">:active</span> ***** 選擇活動鏈接 <br/> # <span style="color:#619BE4">:target</span> ***** 選擇a標簽錨點指向的哪一個元素，并且是在它被a標簽激活的時候 <br/> # <span style="color:#619BE4">:hover</span> ***** 選擇鼠標在元素上面時，該元素的樣式 <br/> # <span style="color:#619BE4">:focus</span> ***** 選擇具有焦點的輸入元素 <br/> # <span style="color:#619BE4">:focus-within</span> ***** 表示一個元素獲得焦點，或，該元素的后代元素獲得焦點 <br/> # <span style="color:#619BE4">:checked</span> ***** 多選和單選被選中時候的樣式 <br/> # <span style="color:#619BE4">:enabled</span> ***** 選擇每一個已啟用的輸入元素 <br/> # <span style="color:#619BE4">:disabled</span> ***** 選擇每一個禁用的輸入元素 <br/> # <span style="color:#619BE4">:in-range</span> ***** 匹配值在指定區間之內的input元素 <br/> # <span style="color:#619BE4">:out-of-range</span> ***** 匹配值超出指定區域的 <br/> # <span style="color:#619BE4">:read-write</span> ***** 用于匹配可讀及可寫的元素 <br/> # <span style="color:#619BE4">:read-only</span> ***** 用于匹配設置 readonly（只讀） 屬性的元素 <br/> # <span style="color:#619BE4">:optional</span> ***** 用于匹配沒有設置required 屬性的元素 <br/> # <span style="color:#619BE4">:required</span> ***** 用于匹配設置了 required 屬性的元素 <br/> # <span style="color:#619BE4">:valid</span> ***** 用于匹配輸入值為合法的元素 <br/> # <span style="color:#619BE4">:invalid</span> ***** 用于匹配輸入值為非法的元素 <br/> # <span style="color:#619BE4">:defined</span> ***** 表示任何已定義的元素 <br/> # <span style="color:#619BE4">:placeholder-shown</span> ***** 在 \<input\> 或 \<textarea\> 元素顯示 placeholder text 時生效 <br/> # <span style="color:#619BE4">:first-child</span> ***** 指定只有當元素是其父級的第一個子級的樣式。 <br/> # <span style="color:#619BE4">:first-of-type</span> ***** 選擇每個元素是其父級的第一個元素 <br/> # <span style="color:#619BE4">:last-child</span> ***** 擇每個元素是其父級的最后一個子級。 <br/> # <span style="color:#619BE4">:last-of-type</span> ***** 選擇每個元素是其父級的最后一個元素 <br/> # <span style="color:#619BE4">:only-child</span> ***** 選擇每個元素是其父級的唯一子元素 <br/> # <span style="color:#619BE4">:only-of-type</span> ***** 選擇每個元素是其父級的唯一的一個標簽是這樣的元素 <br/> # <span style="color:#619BE4">:nth-child(n)</span> ***** 選擇每個元素是其父級的第n個子元素 <br/> # <span style="color:#619BE4">:nth-of-type(n)</span> ***** 選擇每個元素是其父級的第n個元素 <br/> # <span style="color:#619BE4">:nth-last-child(n)</span> ***** 選擇每個元素的是其父級的第二個子元素，從最后一個子項計數 <br/> # <span style="color:#619BE4">:nth-last-of-type(n)</span> ***** 選擇每個元素的是其父級的第二p元素，從最后一個子項計數 <br/> # <span style="color:#619BE4">:autofill</span> ***** 將在瀏覽器自動填充表單中的 \<input\> 元素的值時匹配該 input 元素 <br/> # <b style="color:#4F4F4F;">偽元素</b> <br/> # <span style="color:#619BE4">::first-letter</span> ***** 選擇每一個元素的第一個字母 <br/> # <span style="color:#619BE4">::first-line</span> ***** 選擇每一個元素的第一行 <br/> # <span style="color:#619BE4">::selection</span> ***** 匹配元素中被用戶選中或處于高亮狀態的部分 <br/> # <span style="color:#619BE4">::before</span> ***** 在每個元素之前插入內容 <br/> # <span style="color:#619BE4">::after</span> ***** 在每個元素之后插入內容 <br/> # <span style="color:#619BE4">::placeholder</span> ***** 選擇input的placeholder元素 <br/> # <span style="color:#619BE4">::file-selector-button</span> ***** 偽元素代表 type="file" 的 input 的按鈕 <br/> # <span style="color:#619BE4">[fut]-::backdrop</span> ***** 在任何處于全屏模式的元素下的即刻渲染的盒子 <br/>