4、伪类和伪元素

什么是伪类？

伪类是用于定义元素的特殊状态/CSS伪类是用来添加一些选择器的特殊效果。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
  property: value;
}

链接能够以不同的方式显示：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

/*选择获得焦点的链接*/
a:focus{
    color: #0000ff;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素，例如：

/*选择器匹配作为任何元素的第一个子元素的任何 <p> 元素*/
p:first-child {
  color: blue;
}
/*匹配所有 <p> 元素中的首个 <i> 元素*/
p i:first-child {
  color: blue;
}

什么是伪元素？

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

CSS 伪元素主要用于设置元素指定部分的样式。

例如，它可以用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
  property: value;
}

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式:

/*所有 <p> 元素中的首行添加样式*/
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式:

/*设置所有 <p> 元素中文本的首字母格式*/
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 "float" 为 "none"）
• text-transform
• line-height
• float
• clear

CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分:

/*使所选文本在黄色背景上显示为红色*/
::selection {
  color: red; 
  background: yellow;
}

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline

CSS - ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容:

/*在每个 <h1> 元素的内容之前插入一幅图像*/
h1::before {
  content: url(smiley.gif);
}

CSS - ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容:

/*在每个 <h1> 元素的内容之后插入一幅图像*/
h1::after {
  content: url(smiley.gif);
}

伪类和伪元素的区别

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

区别一：

伪元素：不存在于DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中；

伪类：存在于DOM文档中，逻辑上存在但在文档树中却是无须标识的；

区别二：

伪类只能使用“ ：”

伪元素既可以使用“:”，也可以使用“::” 因为伪类是类似于添加类，所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

区别三：

伪元素要配合content属性一起使用

伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

伪元素的特效通常要使用:hover伪类样式来激活

伪类则不需要配合content属性