什么是＆amp; :: before，＆amp; :: after之后的CSS？

Question

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

http://cssdeck.com/labs/oz2nu681

我复制了代码，有些东西我遇到了麻烦。

• ＆amp; :: after
• ＆安培; ::前
• .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 进一步的答案：

其他一切都是vanilla CSS，::after，::before是pseudo elements，.relative和.radio是class selectors，:checked对于输入类型广告和复选框是pseudo class，而+是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 }

简体中文＆＃34;，如果你愿意：

具有无线电类别的元素，该元素使用直接相邻的兄弟元素进行检查，该元素具有相对类和该元素的子元素，其标记名称为label。