CSS 通用选择器 * 和伪元素

在本文中，我们将介绍CSS中的通用选择器 * 和伪元素的使用方法以及示例说明。

阅读更多：CSS 教程

CSS通用选择器 *

CSS中的通用选择器 * 可以匹配文档中所有的元素，无论是块级元素还是行内元素。它是最常用的选择器之一，常常用于初始化样式或者重置样式。

初始化样式

通用选择器 * 可以用于初始化样式，将所有元素的样式设置为默认值，以便在之后自定义样式，避免继承或默认样式的影响。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

上面的代码将所有元素的外边距和内边距设置为0，并将盒模型设置为边框模型，避免了元素宽度和高度计算的问题。

重置样式

通用选择器 * 也可以用于重置样式，将所有元素的样式设置为一致，以便在不同浏览器中显示效果一致。

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

上面的代码将所有元素的外边距和内边距设置为0，继承字体大小、行高和字体粗细，继承文字颜色，并去除文字装饰。

示例说明

下面是一个示例，演示了如何使用通用选择器和其他选择器结合，实现一些常见的效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #333;
      font-size: 24px;
      margin-bottom: 10px;
    }

    p {
      color: #666;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>Welcome to my CSS article.</p>
</body>
</html>

上述代码中，通用选择器 * 设置了所有元素的外边距和内边距为0，并将盒模型设置为边框模型。通过其他选择器，我们对标题和段落设置了一些样式，使其具有更好的可读性。

CSS伪元素

CSS伪元素是在内容之前或之后生成的额外元素，通过::before和::after两个伪元素选择器进行选择。

伪元素 ::before

伪元素 ::before 可以在选中元素的内容之前插入生成的内容，常用于添加一些装饰或图标。

p::before {
  content: "• ";
  color: red;
}

上面的代码将段落元素的内容之前插入了一个红色的圆点。

伪元素 ::after

伪元素 ::after 可以在选中元素的内容之后插入生成的内容，也常用于添加一些装饰或图标。

a::after {
  content: "→";
  color: blue;
}

上面的代码将链接元素的内容之后插入了一个蓝色的箭头。

示例说明

下面是一个示例，演示了如何使用伪元素为链接添加装饰效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      color: #333;
      text-decoration: none;
      position: relative;
    }

    a::after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #666;
      opacity: 0;
      transition: opacity 0.3s;
    }

    a:hover::after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <a href="#">Hover me</a>
</body>
</html>

上述代码中，我们为链接添加了伪元素 ::after，并通过CSS属性和过渡效果实现了鼠标悬停时下划线的淡入淡出效果。