CSS 用单击鼠标选中全部 DIV 文本

在本文中，我们将介绍如何使用 CSS 来实现用单击鼠标选中全部 DIV 文本的效果。

阅读更多：CSS 教程

CSS 选择器

在学习如何选择所有 DIV 元素的文本之前，让我们先了解一些 CSS 选择器。

CSS 选择器用于选择 HTML 文档中的元素，并为其应用样式。在这里，我们将使用两个选择器来实现所需的效果。

第一个选择器是 * 选择器，它用于选择所有元素。

第二个选择器是 ::selection 伪元素选择器，它用于选择选定文本的样式。

选择所有 DIV 元素的文本

要选择所有 DIV 元素的文本，我们可以使用以下 CSS 代码：

div::selection {
  background-color: yellow;
  color: black;
}

以上代码将把 DIV 元素中被选中的文本的背景颜色设置为黄色，并将文本颜色设置为黑色。您可以根据需要进行调整和其他样式设定。

下面是一个应用以上 CSS 代码的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    div::selection {
      background-color: yellow;
      color: black;
    }
  </style>
</head>
<body>
  <h1>使用单击鼠标选中全部 DIV 文本</h1>
  <div>
    <p>这是一个 DIV 元素中的文本。</p>
    <p>如果您单击鼠标并拖动，您将能够选择这些文本。</p>
  </div>
  <div>
    <p>这是另一个 DIV 元素中的文本。</p>
    <p>同样地，您也可以选择这些文本。</p>
  </div>
</body>
</html>

在上面的示例中，当您单击鼠标并拖动以选择 DIV 元素中的文本时，被选中的文本将应用以上定义的样式。