• 文库
  • 字符
  • 转换
  • 加密
  • 网络
  • 更多
    图表
    数学
    坐标
    图片
    文件
  • 文库
    字符
    转换
    加密
    网络
    更多
    图表
    数学
    坐标
    图片
    文件
logo 在线工具大全
0 评论 收藏 复制链接 分享

CSS选择器参考大全

标签 前端css

选择器 示例 说明 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 类选择器,选择同时具有classname1classname2类名的元素。
示例:选择所有同时拥有class="btn"class="btn-info"的元素。
CSS 1
.classname1 .classname2 .btn .btn-info 类选择器,在classclassname1元素的所有子元素中, 选择classclassname2的元素。
示例:选择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 在同一个父元素下,选择前面有element1element2元素。 即使他们不直接相邻,也会被选择。
示例:选择前面有divp元素。
CSS 3
selector1,selector2 div,p 选择器列表,选择所有匹配元素。
示例:选择所有divp元素。
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属性值中包含examplea元素。
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属性的 aarea 元素, 是: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 伪类选择器,选择值在 minmax范围内的元素。
示例:选择值在范围内的input元素。
CSS 3
:out-of-range input:out-of-range 伪类选择器,选择值在 minmax范围外的元素。
示例:选择值在范围外的input元素。
CSS 3
:required input:required 伪类选择器,选择设置required的元素。
示例:选择设置requiredinput元素。
CSS 3
:optional input:optional 伪类选择器,选择未设置required的元素。
示例:选择未设置requiredinput元素。
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 伪类选择器,选择inputtextarea元素的placeholder文本。 CSS 4
::selection ::selection 伪类选择器,设置用户选取内容跟的样式。 CSS 4
:fullscreen :fullscreen 伪类选择器,选择处于全屏模式的所有元素。
示例:选择处于全屏模式的所有元素。
实验
:nth-col() :nth-col(odd) 伪类选择器,在tablegrid 中基于位置选择列。语法和: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通用选择器,类型选择器,类选择器,ID选择器,组合选择器,属性选择器,伪类选择器等选择器的参考手册,同时显示该选择器被引入的CSS Level。

CSS选择器参考大全-使用说明

CSS选择器参考大全,提供不同类型的CSS选择器参考手册。CSS选择器用于选取CSS规则的应用元素,本工具根据示例,展示了相应的CSS选择器使用方式,应用效果。

  1. 同一个元素,根据不同的CSS选择器,可以应用多条CSS规则。
  2. 同一个元素,根据不同的CSS选择器,应用了多条规则,多条规则指定了同一个CSS属性,则最终应用的属性值需要根据优先级规则来进行计算。最终应用优先级最高的属性值。 CSS优先级计算规则参考