CSS选择器
# 选择器
选择器汇总
CSS选择器总结
| 选择器 | 例子 | 举例 |
|---|---|---|
| .class | .container | 选择class="container"的所有元素 |
| #id | #submit | 选中id="submit"的所有元素 |
| * | *; .container * | 通配符，选择所有元素 |
| element | p | 选择所有<p>元素 |
| element,element | div,p,span | 并列，选择所有<div>、<p>、<span>元素 |
| element element | div p | 选择<div>元素下的所有<p>元素 |
| element>element | div>p | 选择<div>元素下的第一代子元素中的所有<p>元素 |
| element+element | div+p | 选择<div>后与其相邻的<p>元素（必须同一代） |
| element~element | div~p | 选择前面有<div>元素的每个<p>元素（必须同一代,且不比相邻） |
| [attribute] | [title]、[target] | 选择具有title、target属性的所有元素 |
| [attribute="value"] | [target="_blank"] | 选择属性target="_blank"的所有元素 |
| [attribute~="value"] | [title~="flower"] | 选择属性title包含"flower"的所有元素 |
| [attribute|="value"] | [title|="flower"] | 选择属性title以"flower"开头的所有元素 |
| [attribute^="value"] | a[src^="https"] | 选择src属性值以"https开头的每个<a>元素" |
| [attribute$="value"] | a[src$=".pdf"] | 选择src属性值以"pdf"结尾的每个<a>元素 |
| [attribute*="value"] | a[src*="abc"] | 选择src属性值包含"abc"的每个<a>元素 |
| ::first-letter | P::first-letter | 选择每个<p>元素内容的首字母 |
| ::first-line | p::first-line | 选择每个<p>元素内容的首行 |
| :first-child | p:first-child | 选择作为父元素的第一个子元素的每个<p>元素 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素的<p>元素 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个<p>元素的每个<p>元素(既指定必须是第一个子元素，又指定类型。选中所有后代) |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后<p>元素的每个<p>元素(既指定必须是最后一个子元素，又指定类型。选中所有后代) |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一<p>元素的每个<p>元素 |
| :only-child | p:only-child | 选择属于其父元素唯一子元素的每个<p>元素 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素第二个子元素的每个<p>元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，倒数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个<p>元素的每个<p>元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，倒数 |
| :root | :root | 选择文档的根元素<html> |
| :empty | p:empty | 选择没有子元素的每个<p>元素（一个空格都不能有） |
| :target | #link:target | 选择当前活动的#link元素 |
| :enabled | input:enabled | 选择所有可用状态的input元素 |
| :disabled | input:disabled | 选择所有禁用状态的input元素 |
| :checked | input:checked | 选择所有被选中状态下的input元素 |
| :not(selector) | :not(p) | 选中非<p>元素的其他所有元素 |
| ::selection | ::selection | 选中被用户选取的元素（如鼠标左键长按选中的网页文字） |
| :lang(language) | p:lang(en) | 选择带有以"en"开头的lang属性值的每个<p>元素 |
| :link | a:link | 选择所有未被访问的<a>元素 |
| :visited | a:visited | 选择所有已经被访问的<a>元素 |
| :active | a:active | 选择所有活动的<a>元素（被点击时） |
| :hover | a:hover | 选择鼠标指针位于其上的<a>元素 |
| :focus | input:focus | 选择获得焦点的<input>元素 |
| ::before | p::before{ content:"" } | 在每个<p>元素前插入内容（content:""为插入内容） |
| ::after | p::after{ content:""} | 在每个<p>元素后插入内容（content:""为插入内容） |
| 选择器 | 表达式 | 计算方式 | 权重值 |
|---|---|---|---|
| id选择器 | #id | #id | 100 |
| class选择器 | .class | .class | 10 |
| 标签选择器 | p | 元素的tagName | 1 |
| 属性选择器 | [title="查看详情"] | 10 | |
| 相邻选择器（后） | .class+element | 拆分为两个相应类别选择器， 再根据自身权重值计算 | 11 |
| 相邻选择器（前） | #id+.class | 110 | |
| 子元素选择器 | table[summary="CSS"]>td | 12 | |
| 后代选择器 | div p>span | 3 | |
| 通配符 | * | div * | 1 |
| 伪类选择器 | :link，:visited，:active，:not()，:first-child，first-of-type... | 10 | |
| 伪元素 | ::before，::after，::first-letter，::first-line，::selection | 1 | |
编辑 (opens new window)
上次更新: 2023/04/01, 15:26:22