前端——CSS（伪类选择器）& 鼠标操作过程

伪类元素：

设置元素指定部分的样式，例如：设置元素首字母、首行的样式。在元素内容之前或之后插入内容。

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

• ::first-line（首行样式）

1. 用于向文本的首行添加特殊样式：

2. 只能应用于块级元素

适用于此伪元素的属性为：

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

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

• ::first-letter（首字母样式）

1. 用于向文本的首字母添加特殊样式

2. 只适用于块级元素

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

适用于的元素：

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

• ::before（向前插入内容）

1. 可用于在元素内容之前插入一些内容

h1::before {
  content: url(smiley.gif);
}

• ::before（向后插入内容）

1. 可用于在元素内容之后插入一些内容

h1::after {
  content: url(smiley.gif);
}

• ::selection（文字选中）

1. 可用于用户选择文字内容的样式进行更改

::selection {
  color: red; 
  background: yellow;
}

可用于此类元素有：

• color
• background
• cursor
• outline 

鼠标过程：

1. 没有被访问过

a:link属性：

2. 鼠标悬停

a:hover属性：

3. 鼠标点击

a:active属性：

4. 鼠标点击后

a:visited属性：

5. 鼠标变小手

cursor：pointer

6. 删除下划线

text-decoration：none

注意：

• a:hover必须在a:link和a:visited之后
• a:avtive必须在a:hover之后

实例：

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}