| 选择器 | 示例 | 说明 | CSS规范 |
|---|---|---|---|
| * | * | 选择页面中所有元素。 | CSS 2 |
| element | span | 类型选择器，根据节点名称选择元素。
示例：选择所有span元素。 |
CSS 1 |
| :not(selector) | :not(p) | 否定选择器，选择不匹配selector选择器的元素。不支持嵌套，
比如:not(:not(...))的形式是错误的。
示例：选择除了p以外的其他元素。 |
CSS 3 |
| .classname | .btn | 类选择器，根据class属性的值选择元素。
示例：选择所有class="btn"的元素。 |
CSS 1 |
| .classname1.classname2 | .btn.btn-info | 类选择器，选择同时具有classname1和classname2类名的元素。
示例：选择所有同时拥有class="btn"和class="btn-info"的元素。 |
CSS 1 |
| .classname1 .classname2 | .btn .btn-info | 类选择器，在class为classname1元素的所有子元素中，
选择class为classname2的元素。
示例：选择class="btn"元素下的class="btn-info"的元素。 |
CSS 1 |
| element.classname1 | div.info |
类选择器，选择class="classname1"的所有element元素。
示例：选择所有class="info"的div元素。 |
CSS 1 |
| element1 element2 | div p | 选择element1下的所有element2元素。
示例：选择所有div下的所有p元素。 |
CSS 1 |
| element1 > element2 | div > p | 选择直接子元素。
示例：选择div下的直接p元素。 |
CSS 2 |
| element1 + element2 | div + p |
在同一个父元素下，选择紧跟element1的首个element2元素。
示例：选择紧跟div的首个p元素。 |
CSS 2 |
| element1 ~ element2 | div ~ p |
在同一个父元素下，选择前面有element1的element2元素。
即使他们不直接相邻，也会被选择。
示例：选择前面有div的p元素。 |
CSS 3 |
| selector1,selector2 | div,p |
选择器列表，选择所有匹配元素。
示例：选择所有div和p元素。 |
CSS 1 |
| #id | #query |
ID选择器，根据id属性的值选择元素，值需要完全相等。
示例：选择id="query"的元素。 |
CSS 1 |
| [attribute] | a[title] | 属性选择器，选择拥有attribute属性的元素。
示例：选择所有拥有title属性的a元素。 |
CSS 2 |
| [attribute=value] | a[target="_blank"] | 属性选择器，选择属性attribute的值为value的元素。
示例：选择属性target="_blank"的所有a元素。 |
CSS 2 |
| [attribute=value i] | a[target="_blank" i] | 属性选择器，选择属性attribute的值为value的元素，忽略大小写。
示例：选择属性target="_blank"的所有a元素，忽略大小写。 |
CSS 4 |
| [attribute~=value] | a[class~="logo"] |
属性选择器，属性值是空格分割的，其中一个值严格等于value。
示例：选择class属性值中包含logo单词的元素。 |
CSS 2 |
| [attribute^=value] | a[href^="https"] |
属性选择器，选择属性值以value开始的元素。
示例：选择href属性以https开始的a元素。 |
CSS 3 |
| [attribute$=value] | a[href$=".com"] |
属性选择器，选择属性值以value结尾的元素。
示例：选择href属性以.com结尾的a元素。 |
CSS 3 |
| [attribute*=value] | a[href*="example"] |
属性选择器，选择属性值中包含value的元素。
示例：选择href属性值中包含example的a元素。 |
CSS 3 |
| [attribute|=value] | div[lang|="en"] |
属性选择器，选择属性为 value 或者以 value- 开始的元素。
示例：选择lang属性的值为en或者以en- 开始的(比如en-US,en-UK)所有div元素。 |
CSS 2 |
| :dir() | :dir(rtl) | 伪类选择器，选择内部文本方向为指定值的元素。
示例：选择文本方向为从右到左的所有元素。 |
CSS 4 |
| :lang(language-code) | p:lang(en) | 伪类选择器，根据语言选择元素。
示例：选择英语语言下的p元素。 |
CSS 4 |
| :any-link | :any-link | 伪类选择器，选择充当超链接源锚点的元素，与是否访问过该元素无关。它匹配每个具有href属性的 a 或
area 元素,
是:link或:visited匹配元素的超集。
示例：选择所有被:link和:visited匹配的元素。 |
CSS 4 |
| :link | a:link | 伪类选择器，选择未访问的超链接。
示例：选择未访问的a元素。 |
CSS 1 |
| :visited | a:visited | 伪类选择器，选择已访问的超链接。
示例：选择已访问的a元素。 |
CSS 1 |
| :target | :target | 伪类选择器，选择当前URL根据id匹配的元素。 | CSS 3 |
| :active | a:active | 伪类选择器，选择处于活动状态的元素(比如按钮)。
示例：选择页面中的活动链接a。 |
CSS 1 |
| :hover | a:hover | 伪类选择器，选择用户与其交互但并未处于活动状态的元素。比如鼠标悬停。
示例：选择鼠标悬停的a元素。 |
CSS 2 |
| :focus | input:focus | 伪类选择器，选择获取焦点的元素。
示例：选择获取焦点的input元素。 |
CSS 2 |
| :drop() | :drop(active) | 伪类选择器，选择可以接受drop的元素。
支持:drop,:drop(active),
:drop(valid),:drop(invalid)形式。
示例：选择当前正在接受drop的元素。 |
CSS 4 |
| :enabled | input:enabled | 伪类选择器，选择已启用的元素。
示例：选择已启用的input元素。 |
CSS 3 |
| :disabled | input:disabled | 伪类选择器，选择已禁用的元素。
示例：选择已禁用的input元素。 |
CSS 3 |
| :read-write | input:read-write | 伪类选择器，选择用户可编辑的元素。
示例：选择用户可编辑的input元素。 |
CSS 3 |
| :read-only | input:read-only | 伪类选择器，选择用户不可编辑的元素。
示例：选择用户不可编辑的input元素。 |
CSS 3 |
| :placeholder-shown | :placeholder-shown | 伪类选择器，选择placeholder处于显示中的元素。
示例：选择placeholder处于显示中的元素。 |
CSS 3 |
| :default | :default | 伪类选择器，选择一组元素中的默认元素。比如默认按钮，select中处于选中状态的option， 处于checked状态的input元素等。 | CSS 3 |
| :checked | :checked | 伪类选择器，选择处于选中状态的元素。 比如被选中的<input type="radio">，<input type="checkbox">，select中被选中的<option>等。 | CSS 3 |
| :indeterminate | input:indeterminate | 伪类选择器，选择处于indeterminate状态的元素。 | CSS 4 |
| :valid | input:valid | 伪类选择器，选择当前值验证有效的表单元素。
示例：选择当前值有效的input元素。 |
CSS 3 |
| :invalid | input:invalid | 伪类选择器，选择当前值验证无效的表单元素。
示例：选择当前值无效的input元素。 |
CSS 3 |
| :in-range | input:in-range | 伪类选择器，选择值在 min和 max范围内的元素。
示例：选择值在范围内的input元素。 |
CSS 3 |
| :out-of-range | input:out-of-range | 伪类选择器，选择值在 min和 max范围外的元素。
示例：选择值在范围外的input元素。 |
CSS 3 |
| :required | input:required | 伪类选择器，选择设置required的元素。
示例：选择设置required的input元素。 |
CSS 3 |
| :optional | input:optional | 伪类选择器，选择未设置required的元素。
示例：选择未设置required的input元素。 |
CSS 3 |
| :root | :root | 伪类选择器，选择根元素。
示例：匹配html元素。 |
CSS 3 |
| :empty | div:empty | 伪类选择器，选择没有子元素的元素。
示例：选择没有内容的div元素。 |
CSS 3 |
| :nth-child() | li:nth-child(2) |
伪类选择器，基于位置选择元素。支持的语法有：tr:nth-child(odd) 或者 tr:nth-child(2n+1)选择奇数位置的tr元素，
tr:nth-child(even) 或者 tr:nth-child(2n)选择偶数位置的tr元素，tr:nth-child(7)选择第7个tr元素，
:nth-child(An+B)A是整数步长，B是整数偏移量，n为大于等于0的整数，选择第An+B位置的元素。
示例：选择第2个li元素。 |
CSS 3 |
| :nth-last-child() | :nth-last-child(4n) |
伪类选择器，从结尾开始，基于位置选择元素。支持的语法和:nth-child()相同。
示例：从结尾开始，选择位置为4的倍数的元素。 |
CSS 3 |
| :first-child | p:first-child | 伪类选择器，选择第一个元素。
示例：选择相对于兄弟元素位置为第一的p元素。 |
CSS 2 |
| :last-child | p:last-child | 伪类选择器，选择最后一个元素。
示例：选择相对于兄弟元素，位置为最后一个的p元素。 |
CSS 3 |
| :only-child | p:only-child |
伪类选择器，选择没有任何兄弟元素的元素。即父元素只有它一个元素。
示例：选择没有任何兄弟元素的p元素。 |
CSS 3 |
| :nth-of-type() | p:nth-of-type(4n) | 伪类选择器，基于位置选择相同类型的元素。语法和:nth-child()相同，位置计算只会计算相同类型的兄弟元素。
示例：在父元素下的所有p元素中，选择位置为4的倍数的p元素。 |
CSS 3 |
| :nth-last-of-type() | p:nth-last-of-type(4n) |
伪类选择器，基于位置选择相同类型的元素，位置从结尾开始计算。语法和:nth-child()相同。
示例：从结尾开始，在父元素下的p元素中，选择位置为4的倍数的p元素。 |
CSS 3 |
| :first-of-type | p:first-of-type | 伪类选择器，基于类型，选择第一个元素。
示例：选择父元素下的第一个p元素。 |
CSS 3 |
| :last-of-type | p:last-of-type |
伪类选择器，基于类型，选择最后一个元素。
示例：选择父元素下最后一个p元素。 |
CSS 3 |
| :only-of-type | p:only-of-type | 伪类选择器，选择父元素下只有一个该类型元素的元素。
示例：选择父元素下只有一个p元素的p元素。该父元素下可以有其它的非p子元素。 |
CSS 3 |
| :scope | :scope | The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against. | CSS 4 |
| :current() | :current(p,ul) | The :current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display. | CSS 4 |
| :past() | :past(p, span) | The :past CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches :current. For example in a video with captions which are being displayed by WebVTT. | CSS 4 |
| :future() | :future(p, span) | The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current. For example in a video with captions which are being displayed by WebVTT. | CSS 4 |
| :is(selector) | :is(header, main, footer) p:hover | 伪类选择器，选择 header,main,footer 元素下的处于hover状态的p元素。 | CSS 4 |
| :has(selector) | a:has(> img) | 伪类选择器，选择直接包含img元素的a元素。 | CSS 4 |
| ::placeholder | ::placeholder | 伪类选择器，选择input，textarea元素的placeholder文本。 | CSS 4 |
| ::selection | ::selection | 伪类选择器，设置用户选取内容跟的样式。 | CSS 4 |
| :fullscreen | :fullscreen | 伪类选择器，选择处于全屏模式的所有元素。
示例：选择处于全屏模式的所有元素。 |
实验 |
| :nth-col() | :nth-col(odd) | 伪类选择器，在table和
grid
中基于位置选择列。语法和:nth-child()相同。
示例：选择table中的奇数列。 |
实验 |
| :nth-last-col() | :nth-last-col(odd) |
伪类选择器，从结尾开始选择列。语法和:nth-child()相同。
示例：从结尾开始，选择table中的奇数列。 |
实验 |
| :playing | :playing |
伪类选择器，选择处于播放状态的元素。比如audio元素，video元素。
示例：选择处于playing状态的元素。 |
实验 |
| :paused | :paused |
伪类选择器，选择处于暂停状态的元素。比如audio元素，video元素。
示例：选择处于paused状态的元素。 |
实验 |
CSS选择器参考大全，提供不同类型的CSS选择器参考手册。CSS选择器用于选取CSS规则的应用元素，本工具根据示例，展示了相应的CSS选择器使用方式，应用效果。
- 同一个元素，根据不同的CSS选择器，可以应用多条CSS规则。
- 同一个元素，根据不同的CSS选择器，应用了多条规则，多条规则指定了同一个CSS属性，则最终应用的属性值需要根据优先级规则来进行计算。最终应用优先级最高的属性值。 CSS优先级计算规则参考。
