伪类 | 伪元素
: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 元素中被用户选中或处于高亮状态的部分