伪类和伪元素的本质区别是修饰的东西是否能在DOM中找到对应的真实节点,比如伪类:first-of-type修饰的是一个能找到的真实节点,而伪元素::first-line修饰的不是一个真实的节点而是一段文本的一行
伪类:
伪类以单个冒号(:)开头,用于在元素特定状态为他添加样式(注意伪类本身不决定是否回流/重绘,看你伪类把样式改变了什么)
常见伪类:
- 动态伪类:
:link未访问的链接 /:visited已访问的链接 /:hover鼠标悬停的元素 /:active被激活的元素(如鼠标按下的瞬间) /:focus获得焦点的元素(比如输入框点击后) - 结构伪类(根据DOM树中的位置筛选):
:first-child父元素第一个子元素 /:last-child/:nth-child(n)父元素第n个子元素(n可以是数字或关键字,比如odd奇数或even偶数) /:first-of-type同类型第一个 /:last-of-type/:nth-of-type(n)同类型第n个 - 表单相关:
:enabled可用的输入框 /:disabled禁用的输入框 /:checked选中的单选或复选框 /:required必填输入框 /:valid通过验证的输入框 /:invalid未通过验证的输入框
:first-of-type 同类型第一个 / :last-of-type / :nth-of-type(n) 同类型第n个:
- 只能用于标签,因为类型是根据标签判断的
- 注意如果单独用表示父元素的子元素(子孙元素)选中每种标签的第一个,比如
div :first-of-type(中间有空格,选中的不是div,div是父元素)表示div的子孙元素中,每种不同类型元素的第一个都被选中,而用于元素表示父元素的该标签子元素的第一个如div:first-of-type表示父元素的第一个div标签 - 浏览器解析的时候会先忽略class,id这些,解析完这个之后再加上class这些,比如
div.container:first-of-type浏览器会找到父元素的第一个div元素,然后看看上面有没有container,没有就不选
伪元素
伪元素以双冒号(::)开头,但是为了兼容旧浏览器单冒号也行,用于样式化元素的特定部分,或创造一个不在html中的虚拟元素,会渲染在CSSOM和layout中,但不会渲染在dom中
注意:
- 伪元素默认是内联元素,所以如果要当作块级元素渲染需要设置display
- 伪元素即使没内容也一定要设置
content:'',否则伪元素压根不会被渲染
常见伪元素:
::before: 作为元素的开头子元素插入(常与content属性配合,即用content来指定插入的内容)::after: 作为元素的结束族元素插入(常与content属性配合)::first-line: 选择块级元素的第一行文本::first-letter: 选择块级元素的第一个字母::placeholder: 样式化输入框的占位文本::selection: 样式化用户鼠标选中的文本部分