在线工具
  1. 首页
  2. 常用对照表
  3. CSS 选择器参考表

CSS 选择器参考表

分类：常用对照表
CSS 选择器定义了在 Web 页面中选取特定元素的模式，通常可分为元素选择器、类选择器、ID 选择器、属性选择器等几大类。本页列出了最新 CSS 规范支持的选择器及其用法，是前端开发者必备的参考资料之一（建议收藏）。
相关工具：美国行政区划常用计算机英语中文字体中英名称对照全国车牌号码简称HTTP 请求方法一览表世界各国首都HTTP状态码对照表常用 Linux 命令

CSS 选择器 CSS Selectors

说明：CSS 选择器，定义了在 Web 页面中选取特定元素的模式，通常可分为类选择器、ID 选择器、元素选择器、属性选择器、伪类选择器、伪元素选择器等几大类。熟练并灵活使用 CSS 选择器，可大大提高我们书写页面样式的能力。

选择器示例示例说明CSS 规范
**选择页面中所有元素（可以把 * 理解为是一个通配符）CSS 2
:root:root选择文档的根元素。通常用于在 :root 中设置 CSS 变量CSS 3
:lang(language)html:lang(fr)选择 lang="fr" 的 <html> 元素。通常使用该选择器来对不同语言的页面进行样式定制化CSS 2
#id#chartID 选择器，选择页面中 id="chart" 的元素CSS 1
.class.card类选择器，选择页面中 class="card" 的所有元素CSS 1
.class1.class2.btn.btn-danger选择同时具有 btn 和 btn-danger 类名的所有元素CSS 1
.class1 .class2.card .card-body在 class 属性等于 card 元素后代中，选择具有 card-body 类名的元素CSS 1
elementul元素选择器，选择页面中所有 <ul> 元素CSS 1
element.classinput.form-control选择页面中 class="form-control" 的所有 <input> 元素CSS 1
element1, element2a, button选择页面中所有 <a> 和所有 <button> 元素CSS 1
element1 element2div table选择 <div> 元素内的所有 <table> 元素CSS 1
element1 > element2ul > li选择 <ul> 元素的直接 <li> 子元素CSS 2
element1 + element2input + span选择紧跟 <input> 元素的首个 <span> 元素CSS 2
element1 ~ element2hr ~ div选择前面有 <hr> 元素的每个 <div> 元素CSS 3
[attribute][disabled]属性选择器，选择页面中所有带 disabled 属性的元素CSS 2
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素CSS 2
[attribute~=value][value~=tool]选择 value 属性中包含 tool 字样的所有元素CSS 2
[attribute|=value][lang|=zh]选择 lang 属性值等于 zh 或以 zh- 开头的所有元素CSS 2
[attribute^=value]a[href^=mailto]选择 href 属性值以 mailto 开头的每个 <a> 元素CSS 3
[attribute$=value]img[src$=".png"]选择 src 属性以 .png 结尾的所有 <img> 元素CSS 3
[attribute*=value]a[href*=rest]选择 href 属性值中包含 rest 字符串的每个 <a> 元素CSS 3
:activea:active选择页面中的活动链接CSS 1
:hovera:hover选择鼠标停留在其上的链接CSS 1
:visiteda:visited选择页面中已访问过的链接CSS 1
:linka:link选择页面中未访问过的链接CSS 1
::afterdiv::after伪元素选择器，表示在每个 <div> 内部的最后插入内容CSS 2
::beforediv::before伪元素选择器，表示在每个 <div> 内部的最开始插入内容CSS 2
:checkedinput:checked选择每个已选中的 <input> 元素，通常用于选择 type="checkbox" 的 <input> 元素CSS 3
:enabledbutton:enabled选择页面中每个已启用的 <button> 元素CSS 3
:disabledbutton:disabled选择页面中每个被禁用的 <button> 元素CSS 3
:defaultinput:default选择默认的 <input> 元素CSS 3
:emptydiv:empty选择没有子元素的每个 <div> 元素（包括文本节点）。CSS 3
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素CSS 2
::first-letterp::first-letter伪元素选择器，选择每个 <p> 元素的首字母CSS 1
::first-linep::first-line伪元素选择器，选择每个 <p> 元素的首行（第一行）CSS 1
:first-of-typep:first-of-type选择每个 <p> 元素，且该元素是其父级的第一个 <p> 元素CSS 3
:focusinput:focus选择当前获得焦点的 <input> 元素CSS 2
:fullscreen:fullscreen选择当前处于全屏模式的元素实验性
::backdrop::backdrop伪元素选择器，选择在任何处于全屏模式的元素下的即刻渲染的盒子实验性
:in-rangeinput:in-range选择值处于指定范围之内的 <input> 元素CSS 3
:out-of-rangeinput:out-of-range选择值超出指定范围的 <input> 元素CSS 3
:indeterminateinput:indeterminate选择处于不确定状态的 <input> 元素。通常用于选择那些具有中间状态的 checkboxes、progress 和 radios 等元素CSS 3
:validinput:valid选择当前值为有效值的所有 <input> 元素CSS 3
:invalidinput:invalid选择当前值为无效值的所有 <input> 元素CSS 3
:last-childp:last-child选择属于父元素最后一个子元素的每个 <p> 元素CSS 3
:last-of-typep:last-of-type选择每个 <p> 元素，且该元素是其父级的最后一个 <p> 元素CSS 3
:not(selector):not(button:disabled)否定选择器，选择所有未被禁用的按钮CSS 3
:nth-child(n)li:nth-child(4)选择属于其父元素的第四个子元素的每个 <li> 元素CSS 3
:nth-last-child(n)li:nth-last-child(2)选择属于其父元素的倒数第二个子元素的每个 <li> 元素CSS 3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素CSS 3
:nth-last-of-type(n)p:nth-last-of-type(2)选择属于其父元素倒数第二个 <p> 元素的每个 <p> 元素CSS 3
:only-of-typep:only-of-type选择 <p> 元素，且该 <p> 元素没有其他相同类型的兄弟元素CSS 3
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素CSS 3
:requiredinput:required选择带有 required 属性的 <input> 元素CSS 3
:optionalinput:optional选择不带 required 属性的 <input> 元素CSS 3
::placeholderinput::placeholder伪元素选择器，用于设置 <input> 元素的 placeholder 占位符 样式实验性
:read-onlyinput:read-only选择带有 readonly 属性的 <input> 元素CSS 3
:read-writeinput:read-write选择不带 readonly 属性的 <input> 元素CSS 3
::selection::selection伪元素选择器，可设置已选取内容的样式CSS 3
:target#profile:target选择当前活动的 #profile 元素CSS 3

相关 CSS 工具推荐：