伪类选择器
css伪类是一个以冒号:
作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。你可能希望某个元素在处于某种状态下呈现另一种样式,例如当鼠标悬停在元素上面时,或者当一个复选框被禁用或被勾选时,又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。
一共有如下伪类选择器:
- css2.1中的伪类选择器
1
2
3
4
5
6
7
8:first-child 父元素的第一个子元素
:link 所有未被点击的链接
:visited 所有已被点击的链接
:active 鼠标已经其上按下、还没有释放的元素
:hover 鼠标悬停其上的元素
:focus 获得当前焦点的元素
:lang(c) lang属性等于c的元素
:first 打印文档的时候,第一页的样式 - css3中的伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24:enabled 匹配表单中激活的元素
:disabled 匹配表单中禁用的元素
:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
:root 匹配文档的根元素,对于HTML文档,就是HTML元素
:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
:not(s) 匹配不符合当前选择器的任何元素
:target 匹配文档中特定"id"点击后的效果
:default 表示一组相关元素中的默认表单元素
:indeterminate 表示状态不确定的表单元素
:left/right 需要和@规则 @page 配套使用, 对打印文档的左侧页设置CSS样式.目前只有ie和opera支持
@page :left {
margin: 2in 3in;
}
:required 表示任意拥有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单在提交之前容易的展示必填字段并且渲染其外观.
:optional 表示任意没有required属性的 <input>,<select> 或 <textarea> 元素使用它。
伪类选择器使用:
html
1 | <a href="https://www.baidu.com" target="_blank">Baidu</a> |
1 | /* 这些样式将在任何情况下应用于我们 |
伪元素
伪元素跟伪类很像,但它们又有不同的地方。它们都是关键字,但这次伪元素前缀是两个冒号::
, 同样是添加到选择器后面去选择某个元素的某个部分。
css2 和 css3 伪元素写法:css2是用一个冒号,css3使用两个冒号
一共有以下伪类:
1 | ::after 最后一个子元素 |