CSS 选择器参考表

分类:常用对照表
CSS 选择器定义了在 Web 页面中选取特定元素的模式,通常可分为元素选择器、类选择器、ID 选择器、属性选择器等几大类。本页列出了最新 CSS 规范支持的选择器及其用法,是前端开发者必备的参考资料之一(建议收藏)。

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选择同时具有 btnbtn-danger 类名的所有元素CSS 1
.class1 .class2.card .card-bodyclass 属性等于 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> 元素。通常用于选择那些具有中间状态的 checkboxesprogressradios 等元素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 工具推荐: