面试题准备（十七）：伪类、伪元素

概述

数量众多，不同于其它选择器，通常用于明确的目的

	伪类	伪元素
语法	单冒号 :	双冒号 :
同时使用数量	多个	单个
位置	元素前后	元素后
作用	修饰	创建对象
使用场景	多	少

伪类

用于选择特定状态的元素，例如 鼠标悬停时、点击时

• 特点
  • 伪类和伪类可以进行多个拼接
  • 伪类基于 DOM 产生不同的状态，不生成新对象

button:hover {
	background-color: #f88;
}
ul > li:nth-child(2n):hover {
	background-color: #f88;
}

常用伪类

• 状态类

类	描述
:link	匹配未曾访问过的链接
:visited	匹配已访问过的链接
:hover	鼠标悬停到元素之上时匹配
:active	用户激活元素时匹配，如点击
:focus	当元素出现焦点时匹配

• 结构类

类	描述
:first-child	匹配兄弟元素的第一个
:last-child	匹配兄弟元素的最后一个
:nth-child	将同一父节点下的子元素按 an+b 进行匹配
:nth-of-type	将同一父节点下的同一类型子元素按 an+b 进行匹配

• 表单类

类	描述
:checked	匹配已选中的单选框或复选框
:disable	匹配处于关闭状态的元素
:valid	匹配处于可用状态的元素
:required	匹配必填的 form 元素

• 语言类

类	描述
:dir	基于其方向性（HTML dir 属性或者 CSS direction 属性的值）匹配一个元素
:lang	基于语言（HTML lang 属性的值）匹配元素

伪元素

虽然以类的方式表现，但它更像是向页面中加入新 HTML 元素

• 伪元素创建不存在于 DOM 的对象且可以操作
• 伪元素是行级元素

.content::after{
	content: "";
	display: inline-block;
	clear: both;
}

常用伪元素

元素	描述
::before :: after	匹配指定元素之前 / 后的可样式化元素
::first-letter	匹配元素第一个字母
::first-line	匹配包含伪元素在内的第一行

总结

伪类用来对用户的某种行为来进行元素选择，而伪元素是在该元素周围以某种方式创建一个元素进行操作，或者选取该元素的某一部分进行操作