html - 什么是 CSS 中的 &::before, &::after？

Question

<分区>

Answer 1

&::after 实际上在 CSS 中没有什么，但它是 SASS/SCSS 的一个特性，可能是在这样的上下文中编写的:

li {
  /* some style 1 */

  &::after {
    /* some style 2 */
  }

}

编译为:

li { /* some style 1 */ }
li::after { /* some style 2 */ }

基本上，SASS 中的 & 符号在编译为 CSS 时会拉入父选择器。

编辑 您不能在 .css 文件中使用 & 符号，因为它没有任何意义，您只能在使用 SASS 预处理器编译为 CSS 的 sass/scss 文件中使用它。

关于 SASS 中的 & 符号的博文(不是我的):

http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

编辑 2 更多答案:

其他一切都是 vanilla CSS，::after，::before 是 pseudo elements , .relative 和 .radio 是 class selectors , :checked 是 pseudo class对于输入类型单选框和复选框，+ 是一个 adjacent sibling selector

MDN 应该是你的(一个)CSS 文档权威机构，所以我选择链接到他们的页面，而不是简单地将他们文档的内容复制并粘贴到这个答案中。

编辑 3

我意识到我没有具体说明什么是 & + .relative。

我一开始说的时候提到了它

the ampersand in SASS pulls in the parent selector when it compiles to CSS

在 OPs 链接示例中有这段代码:

.radio:checked
  & + .relative
    label 
       ... some styles here

当您考虑 & 拉入父选择器时，您会看到编译后的 CSS:

.radio:checked + .relative label { ... some styles here }

用“简单的英语”，如果你愿意:

具有 radio 类的元素与具有 relative 类的紧邻兄弟元素和该元素的标签名称为 label 的子元素进行检查。