CSS 中的 &::before 和 &::after 是什么？ [关闭]

Question

我想创建一个垂直时间线，我遇到了这个页面。

http://cssdeck.com/labs/oz2nu681

我复制了代码，但有些事情我遇到了麻烦。

• &::之后
• &::之前
• .radio：已选中； & + .relative;

我试图将其更改为该样式表代码，但卡在这里。 CSS 代码也不同于传统的 CSS 文件包含的内容。这段代码是什么，如何使用？

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 更多答案：

其他的都是普通 CSS，::after、::before 是 pseudo elements、.relative 和 .radio 是 class selectors、:checked 是 pseudo class 用于输入类型 radio 和 checkbox，而 @ 987654336@ 是adjacent sibling selector

MDN 应该是 CSS 文档的（一个）权威机构，因此我选择链接到他们的页面，而不是简单地将其文档的内容复制并粘贴到此答案中。

编辑 3

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

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

SASS 中的 & 符号在编译为时拉入父选择器 CSS

在 OPs 链接示例中，有以下代码：

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

当您考虑 & pulls in the parent selector 时，您会看到编译后的 CSS：

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

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

具有radio类的元素与具有relative类的直接相邻兄弟元素以及该元素的标签名称为label的子元素进行检查。