:before和::before的区别_:before ::before-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42645716/article/details/88044034

本文详细介绍了CSS中的伪类和伪元素概念，包括它们的语法、应用场景及兼容性。伪类如:hover和:visited用于改变元素在特定状态下的样式，而伪元素如::before和::after用于在元素前后插入内容。

:before/::before 在前面
:after/::after 在后面

1.双冒号(::)更加规范一些，But 双冒号(::)不兼容IE8，单个冒号(:)兼容。

不知道是不是因为一个引号是css2的写法，两个引号是css3的写法。

(单冒号[:before/:after] 伪类选择符)
(双冒号[::before/::after] 伪对象选择符)

既然说到这里，这篇文章，说一下伪元素和伪类。

一、伪类（Pseudo-class）

一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

:link     /* 应用于未被访问过的链接； */
:hover    /* 应用于鼠标悬停到的元素； */
:active   /* 应用于被激活的元素； */
:visited  /* 应用于被访问过的链接，与:link互斥。 */
:focus    /* 应用于拥有键盘输入焦点的元素 */
:first-child  /* 选择某个元素的第一个子元素； */
:last-child   /* 选择某个元素的最后一个子元素； */
:nth-child()  /* 选择某个元素的一个或多个特定的子元素； */
:nth-last-child()    /* 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； */
:nth-of-type()       /* 选择指定的元素； */
:nth-last-of-type()  /* 选择指定的元素，从元素的最后一个开始计算； */
:first-of-type  /* 选择一个上级元素下的第一个同类子元素； */
:last-of-type   /* 选择一个上级元素的最后一个同类子元素； */
:only-child     /* 选择的元素是它的父元素的唯一一个子元素； */
:only-of-type   /* 选择一个元素是它的上级元素的唯一一个相同类型的子元素； */
:empty          /* 选择的元素里面没有任何内容。 */

demo

<a href="###" target="_blank">Mozilla Developer Network</a>

/* 这些样式将在任何情况下应用于我们
的链接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */

a:visited {
  color: blue;
}

/* 当光标悬停于链接，键盘激活或锁定
链接时，我们让链接呈现高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

二、伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (:? ，同样是添加到选择器后面去选择某个元素的某个部分。
在这里插入图片描述
demo

<ul>
  <li><a href="###">CSS</a> defined in the MDN glossary.</li>
  <li><a href="###">HTML</a> defined in the MDN glossary.</li>
</ul>

/* 所有含有"href"属性并且值以"http"开始的元素，
将会在其内容后增加一个箭头（去表明它是外部链接）
*/

[href^=http]::after {
  content: '⤴';
}