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