[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/>