伪类和伪元素

伪类和伪元素

伪类

定义元素的特殊状态，通过给子元素添加一个类，然后定义这个类的样式来实现效果

语法及示例

/* 语法 */
selector:pseudo-class {
  property: value;
}

/* 示例 */
a:link {
  color: #FF0000;
}

常见的伪类

/* 鼠标点击状态 */
a:active { }
/* 鼠标悬停状态 */
a:hover { }
/* 表示鼠标点击之前状态 */
a:link { }
/* 表示鼠标点击之后状态 */
a:visited { }

:first-child	选择父元素下首个子元素
:focus	选择拥有键盘输入焦点的元素
:first-of-type	选择的子元素是其父元素的第一个子元素
:last-of-type	选择的子元素是其父元素的最后一个子元素
:nth-of-type(n)	选择父元素下第n个子元素
:nth-last-of-type(n)	选择父元素下倒数第n个子元素
:last-child	选择父元素下最后一个子元素
:nth-child(n)	选择父元素下第n个子元素
:nth-last-child(n)	选择父元素下倒数第n个子元素

伪元素

伪元素通常以::前缀，伪元素是通过添加一个实际的元素，在给元素添加样式来实现效果的。

常见的伪元素有

::after 在指定元素的内容前面插入内容
::before 在指定元素的内容后面插入内容

补充：之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查