伪类选择器

• 伪类是CSS选择器中比较特殊也是很常用的一种，在昨天学习的CSS选择器中，都需要指定元素的类或者标签 ID的其中一个，但是伪类就不需要
• 伪类分为结构伪类和状态伪类
• 结构伪类：顾名思义就是通过结构来选择， 也就是根据当前元素的位置来获取元素
• 状态伪类：通过当前元素的状态来选择元素
• 需要注意的书伪类选择的权重级别依旧是类级

结构伪类

• :nth-of-type(an+b)
• 这个伪类选择器的目标是找到所有元素的兄弟元素，然后根据位置的先后顺序开始排序，选择的结果是伪类中的（ab+n）所匹配到的所有元素
• 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表示任意内容未通过验证的或其他元素
• :hover只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素
• :focus只会在用户使用键盘控制，选定元素的时候激活
• :disabled获取被禁用的元素
• :checked 获取被选择中的单选/多选按钮
• :visited表示用户已访问过的链接
• :link所有尚未访问的链接
• :active当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间

伪元素

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

盒模型

块级盒子

• 一个被定义成块级的（block）盒子会表现出以下行为：
• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
• 除非特殊指定，诸如标题 (

  等) 和段落 (

  ) 默认情况下都是块级的盒子。

内联盒子

• 如果一个盒子对外显示为 inline，那么他的行为如下：
• 盒子不会产生换行
• width 和 height 属性将不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开
• 用做链接的 元素、 、 以及 都是默认处于 inline 状态的
• 我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型

今日总结

• 今天主要是复习了一下前几天的内容 HTML标签和CSS的基础选择器等这些内容，然后了解了伪类选择器的使用，其实这个还是挺有用的，在一个类下有多个相同元素时，就可以使用伪类选择器来选择到其中一个 或者几个
• 还有就是盒模型，这是CSS必学也是必须了解的内容，因为会在后面设计到内容的计算和样式的控制等等，很重要
• 最后 学习就是需要不断地坚持 加油！！