五分钟搞懂 : 和 :: 的区别

zayyo

于 2024-07-16 22:41:19 发布

阅读量971

点赞数 20

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45215308/article/details/140422345

版权

背景

在给元素添加样式时，我们是否经常会对 : 和 :: 傻傻分不清，只能通过反复尝试来确定呢？别担心，我也是这样过来的！不过，今天我们将一劳永逸地解决这个问题，让你自信运用 CSS 伪选择器。

这篇文章将通过示例讲解 : 和 :: 的区别，并分享一些使用它们的技巧。

`:` 和 `::`的区别

: 用于表示伪类，它关注于描述一个元素的特定状态。这些状态通常与用户交互有关，比如元素被鼠标悬停(:hover)、获得焦点(:focus)、被激活(:active)等。

:: 用于表示伪元素，它用于创建一些不在文档树中的元素，可以通过CSS生成并加以样式化。这些伪元素是选中元素内容的一部分，或者以选中元素为参照来定位，比如在元素内容之前(::before)或之后(::after)插入内容，或者定制占位符的样式(::placeholder)。

简而言之：

: 用于描述 选中元素 的状态，主要涉及到用户与元素的交互（例如，当鼠标悬停在元素上时）。
:: 用于创建属于 选中元素的某部分 ，或是创建一些不在DOM树中的元素,这些元素是对选中元素的内容或样式的补充。。

伪类(😃

伪类用于定义元素的特定状态。它们是元素在这些状态下的抽象表示，并不对应文档树中的实际元素。伪类以冒号 : 开头，后跟伪类名称

例如：

:hover - 当用户将鼠标悬停在元素上时为其添加样式（注意不是点击，而是鼠标悬停）。
:active - 当用户点击元素时为其添加样式（即元素处于活动状态时）。
:visited - 为用户点击过的锚标记（链接）添加样式。
:focus - 为用户单击的输入字段添加样式。
:first-child - 选择其父元素的第一个子元素。
:last-child - 选择其父元素的最后一个子元素。
:nth-child() - 选择其父元素的第n个子元素。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pseudo-classes Example</title>
<style>
  /* 为链接添加基本样式 */
  a {
    color: blue;
    text-decoration: none;
  }

  /* 当鼠标悬停在链接上时改变颜色 */
  a:hover {
    color: red;
  }

  /* 当链接被点击（处于活动状态）时改变颜色 */
  a:active {
    color: green;
  }

  /* 当链接被访问过后改变颜色 */
  a:visited {
    color: purple;
  }

  /* 为输入框添加基本样式 */
  input[type="text"] {
    border: 2px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    width: 200px;
  }

  /* 当输入框被聚焦时改变边框颜色 */
  input[type="text"]:focus {
    border-color: blue;
  }
</style>
</head>
<body>

<h2>CSS 伪类示例</h2>

<!-- 链接示例 -->
<p>Hover over, click or visit the link:</p>
<a href="#" target="_blank">This is a link</a>

<!-- 输入框示例 -->
<p>Click inside the input field:</p>
<input type="text" placeholder="Hover over me">

</body>
</html>

伪元素（::）

伪元素用于样式化文档的某些部分，这些部分并不是实际的DOM元素，但可以被视为文档树的一部分。伪元素以两个冒号 :: 开头，后跟伪元素名称

例如：

::before - 定位在选中元素之前的创建元素。
::after - 定位在选中元素之后的创建元素。
::placeholder - 定位占位符属性的值。
::first-letter - 选择块级元素的第一个字母。
::first-line - 选择块级元素的第一行。
::selection - 选择用户选中或高亮的文本部分。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pseudo-elements Example</title>
<style>
  /* 为段落添加基本样式 */
  p {
    position: relative;
    font-size: 16px;
  }

  /* 在每个段落之前添加内容 */
  p::before {
    content: "注意：";
    color: red;
    font-weight: bold;
  }

  /* 在每个段落之后添加内容 */
  p::after {
    content: "（请仔细阅读）";
    color: green;
    font-size: 12px;
  }

  /* 自定义输入框的占位符样式 */
  input::placeholder {
    color: #888;
    font-style: italic;
  }
</style>
</head>
<body>

<h2>CSS 伪元素示例</h2>

<!-- 段落示例 -->
<p>这是一个段落。</p>

<!-- 输入框示例 -->
<input type="text" placeholder="请输入文本">

</body>
</html

使用建议

仅在必要时使用 :: ：虽然大多数现代浏览器都支持使用 :: 对伪元素进行选择，但为了确保向后兼容性，对于伪元素，建议在支持CSS3的环境中使用 ::，而在需要确保老版本浏览器兼容性的情况下使用 :。
仅在必要时使用 CSS 生成的内容 ：伪元素如 ::before 和 ::after 可以用来添加装饰性内容，但我们应避免用它们来添加重要的内容信息。因为CSS 生成的元素不会出现在 DOM 中，因此辅助功能工具无法解析它们。