伪类、伪元素和盒模型

伪类

伪类是选择器的一种，用来选择HTML中没有定义class和标签的元素
常用的伪类有两类：
1.结构伪类：根据元素的位置来获取
2.状态伪类：根据元素的状态来获取，比如获取焦点元素

注：伪类的权重级别依旧是类级

语法：:伪类名

结构伪类

:nth-of-type(an+b)

这个伪类选择器是找到所有当前元素的兄弟元素，然后根据位置的先后顺序开始排序
选择的结果为伪类中的（ab+b）所匹配到的元素

a是值 n是变量 b是偏移值

下面举几个例子
n+3 ：匹配合集中从第三个元素开始之后的所有元素（因为a=1所一不用写 所以1n+3和n+3 一样）
3 ：匹配第三个元素。（等同于0n+3 因为0n=0 所以不用写 直接写3）
同理
2n+3：匹配合集中 从第三个元素开始 所有处在2倍数位置上的元素 从0开始计算
3n+3：匹配合集中 从第三个元素开始 所有处在3倍数位置上的元素 从0开始计算
常用算法
2n+1 选择在奇数位置上的元素
2n 选择在偶数位置上的元素

状态伪类

选择器 描述
:invalid表示任意内容未通过验证的<input>或其他<form>元素
:hover 只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素
:focus 只会在用户使用键盘控制，选定元素的时候激活
:disabled 获取被禁用的元素
:checked 获取被选择中的单选/多选按钮
:visited 表示用户已访问过的链接
:link 所有尚未访问的链接
:active 当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

伪元素

::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。

盒模型

块级盒子

一个被定义成块级的（block）盒子会表现出以下行为：

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

内联盒子

如果一个盒子对外显示为 inline，那么他的行为如下：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。