当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 5:34:56

背景

在给元素添加样式时，我们是否经常会对 : 和 :: 傻傻分不清，只能通过反复尝试来确定呢？别担心，我也是这样过来的！不过，今天我们将一劳永逸地解决这个问题，让你自信运用 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 中，因此辅助功能工具无法解析它们。