CSS中的::和~有什么作用

在本文中，我们将介绍CSS中的两个选择器符号：:: 和 ~。这两个符号在CSS中有着不同的作用和用途。

阅读更多：CSS 教程

::伪元素选择器

::符号用于表示伪元素选择器，它用于选择并对元素的特定部分进行样式化。伪元素是在元素的内容之前或之后插入的虚拟元素，并且可以通过CSS样式进行控制。

以下是一些常见的伪元素选择器：

例如，如果我们想在一个段落的开头添加一个小图标，可以使用::before伪元素选择器：

p::before {
  content: '';
}

上述代码将在每个段落之前添加一个黑色的圆点。

~符号用于表示兄弟选择器，它允许我们选择位于指定元素后面的所有同级元素。兄弟选择器仅适用于在同一级别的元素之间进行选择。

假设我们有一个HTML结构如下：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>草莓</li>
  <li>蓝莓</li>
</ul>

现在，如果我们想对位于第二个<li>元素之后的所有元素应用样式，可以使用兄弟选择器~：

li:nth-child(2) ~ li {
  color: blue;
}

上述代码将使位于第二个<li>元素之后的所有元素变为蓝色。

让我们看一个综合示例来说明::和~的用法。

考虑以下HTML结构：

<div class="container">
  <h3>标题</h3>
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
  <p>这是最后一个段落。</p>
</div>

现在，我们想让第一个段落的第一个字母变成红色，并且使第一个段落之后的所有段落变为蓝色。

我们可以使用::first-letter伪元素选择器和兄弟选择器~来实现：

p:first-child::first-letter {
  color: red;
}

p:first-child ~ p {
  color: blue;
}

上述代码将会使第一个段落的第一个字母变成红色，并且使第一个段落之后的所有段落变为蓝色。

在本文中，我们介绍了CSS中的::和~的作用和用法。::用于表示伪元素选择器，用于对元素的特定部分进行样式化；~表示兄弟选择器，用于选择位于指定元素后面的所有同级元素。通过合理运用这些选择器，我们可以轻松控制网页中的元素样式。