CSS伪类

CSS伪类

CSS伪类分为UI伪类和结构化伪类，通常会使用一个":"+伪类名一起使用（而"::"表示的是伪元素）UI伪类通常伴随着某个动作对页面中的某个标签的样式进行更改。这些动作通常包括鼠标悬浮和点击等。而结构化伪类就是为了能够快速的定位某个标签和怎加定位页面中标签的方法，从而减少CSS中的代码量。

有关CSS伪类和结构化伪类的详细介绍可以访问菜鸟教程、MDN、w3school

UI伪类

关于CSS中的UI伪类有：

1. 链接伪类：

• :Link。等待用户的点击
• :visited。已访问过的链接
• :hover。鼠标悬停在链接上
• :active。链接正在被点击

2. :focus伪类：在标签被触发获得焦点时，会触发focus伪类中的样式。

   例如：输入框获得焦点时会伴有蓝色的边框

   input:focus {border:1px solid blue;} 
   

3. :target 伪类：如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以 用:target 伪类选中它。

结构化伪类

结构化伪类的特点是可以具体到第几个标签，比如第一个标签、最后一个标签、第n个标签。

1. :first-child 和:last-child

   :first-child 代表一组同胞元素中的第一个元素，而:last-child 则代表最后一个。

   例如：

   body:first-child {color:black;}<!-- 代表body标签中的第一个子标签设置为黑色 -->
   body:last-child {color:black;}<!-- 代表body标签中的最后一个子标签设置为黑色 -->
   

2. :nth-child(n)

   :nth-child(n)代表第n个子标签。

   例如：

   body:nth-child(3) {color:black;}<!-- 代表body标签中的第三个子标签设置为黑色 -->
   

参考《CSS设计指南第三版》