选择器

伪类 | 伪元素

:target        url中的当前锚点, 可以利用这个特效实现类似js事件触发的效果
:link        未访问链接
:visited      访问过的链接
:hover       把鼠标放在链接上的状态(在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的)
:active       正在活动链接,当你点击一个链接时它变成活动链接,所以这是一个一瞬间的效果(在CSS定义中,a:active 必须被置于 a:hover 之后,才是有效的)


:first-child    该元素是其父元素的第一个孩子(文本的值,不算是孩子)
:last-child     该元素是其父元素的最后一个孩子
:only-child     该元素是其父元素唯一的孩子
:nth-child(n)    该元素是其父元素的正数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)
:nth-last-child(n) 该元素是其父元素的倒数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)


:first-of-type   该元素是其父元素的第一个该元素(如: p:first-child, p元素是其父元素的第一个孩子,其上没有元素了; p:first-of-type, p元素是其父元素的第一个p孩子, 无论其上还有多少孩子(div, h1, span等))
:last-of-type    该元素是其父元素的最后一个该元素
:only-of-type 该元素是其父元素唯一的该元素
:nth-of-type(n)   该元素是其父元素的正数第几个该元素(n可以是: odd,奇数; even,偶数; an+b,n从0自增)
:nth-last-of-type(n) 该元素是其父元素的倒数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)


:before       元素之前插入内容
:after       元素之后插入内容


:first-letter   改元素内文字的第一个字母
:first-line    该元素内文字的第一行(文字会自动换行的哦)


:root        文档的根元素,在HTML中根元素始终是HTML元素
:not         所有该元素之外的元素
:empty        没有孩子的元素


:lang()       向带有指定 lang 属性开始的元素添加样式 (p:lang(it)会对<p lang="it"></p>起作用)


:enabled       启用的的元素
:disabled      禁用的的元素
:valid        值是合法的
:invalid       值是非法的
:required      表单元素是必填项, 表单元素可以使用 required 属性来设置必填项
:optional      表单元素中如果没有特别设置 required 属性即为 optional 属性
:read-write     即没有 "readonly" 属性的元素
:read-only      设置了 "readonly" 属性的元素, 表单元素可以设置 "readonly" 属性来定义元素只读, 目前,大多数浏览器, :read-only 选择器适用于 input 和 textarea 元素
:in-range      标签的值在指定区间值,只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性
:out-of-range
:focus        具有焦点的元素
:checked       选中的输入元素(仅适用于单选按钮或复选框)


div > p       所有父级是 <div> 元素的 <p> 元素, 所有的儿子
div + p       <div>元素之后的第一个<p>兄弟元素, 第一个弟弟
div ~ p        <div>元素之后的所有的<p>兄弟元素, 所有弟弟


*           所有元素
p           所有p元素
.in          class属性
#in          id属性
div, p        所有<div>元素和<p>元素
div p        <div>元素内的所有<p>元素


[attribute]           所有有attribute属性的元素 (div[class]: 所有有class属性的div元素)
[attribute=value]       所有其attribute属性的值为value的元素 (div[class=col-md-2]: 所有class="col-md-2"的div元素)
[attribute|=value]       所有其attribute属性的值是以value开头的字符串的元素 (div[class|=col]: 所有class是以col开头的div元素, class="col-md-2", class="col5")
[attribute~=value]       所有其attribute属性的值是含有value的字符串的元素
                 (div[class~=col-md-2]: 所有class中含有col-md-2的div元素, 这个class可以有其他的值,比如class="pull-right col-md-2 text-left", class="tt_col-md-2")

[attribute$=value]       所有其attribute属性的值是以value结尾的字符串的元素   (div[class$=col-md-2]: 所有class是以col-md-2结尾的div元素, 比如class="pull-right col-md-2", class="tt 6-col-md-2")
[attribute^=value]       所有其attribute属性的值是以value开头的字符串的元素  (div[class^=col]: 所有class是以col开头的div元素, class="col-md-2", class="col5")
[attribute*=value]       所有其attribute属性的值是含有value的字符串的元素  
                 (div[class*=col-md-2]: 所有class中含有col-md-2的div元素, 这个class可以有其他的值,比如class="pull-right col-md-2 text-left", class="tt_col-md-2")


::selection           元素中被用户选中或处于高亮状态的部分

选择器的优先级

原文地址:https://www.cnblogs.com/hangtt/p/7191853.html