伪类和伪元素

伪类和伪元素是 CSS 中用于处理选择器的两种特殊功能。它们允许开发者在样式中创建更复杂和灵活的规则，而无需在 HTML 文档中添加额外的标签。

伪类 (Pseudo-class)

伪类作用于元素的特定状态。它们用于选择元素在某种条件下的样式，例如鼠标悬停或焦点状态。伪类以冒号（:）开头。

常见的伪类示例：

1. :hover: 当用户将鼠标悬停在元素上时应用的样式。

   a:hover {
        
       color: red; /* 当鼠标悬停在链接上时，将文本颜色设置为红色 */
   }
   

2. :active: 当元素处于活动状态时应用的样式，例如当用户按下鼠标按钮。

   a:active {
        
       color: blue; /* 当链接被点击时，将文本颜色设置为蓝色 */
   }
   

3. :focus: 当元素获得焦点时应用的样式，通常用于输入框。

   input:focus {
        
       border: 2px solid green; /* 当输入框获得焦点时，将边框设置为绿色 */
   }
   

4. :nth-child(n): 选择父元素下的第 n 个子元素。

   li:nth-child(2) {
        
       font-weight: bold; /* 将每个父元素下的第二个列表项设置为粗体 */
   }
   

伪元素 (Pseudo-element)

伪元素用于选择元素的特定部分，允许开发者在实际的 DOM 结构中没有定义的情况下添加样式。伪元素以双冒号（::）开头（尽管单冒号（:）也被广泛支持）。

常见的伪元素示例：

1. ::before: 在元素的内容前插入内容。

   p::before {
        
       content: "注意："; /* 在每个段落前插入“注意：” */
       font-weight: bold;
   }
   

2. ::after: 在元素的内容后插入内容。

   p::after {
        
       content: " — 结束"; /* 在每个段落后插入“— 结束” */
   }
   

3. ::first-line: 选择文本的第一行，用于对首行文本应用特殊样式。

   p::first-line {
        
       font-weight: bold; /* 将每个段落的第一行加粗 */
   }
   

4. ::first-letter: 选择文本的第一个字母。

   p::first-letter {
        
       font-size: 2em; /* 将段落的第一个字母的字体大小设置为 2 倍 */
   }
   

总结

• 伪类：用于表示元素的特定状态，通常与用户的交互有关，如悬停、焦点等，以冒号（:）表示。
• 伪元素：用于选择元素的特定部分，允许对元素的内容进行样式处理，以双冒号（::）表示。

二者结合使用，可以极大丰富网页的视觉效果和交互体验。