CSS中的& :: before和& :: after是什么？ [英] What is &::before, &::after in CSS?

问题描述

我想创建一个垂直时间轴，并且碰到了此页面。

I wanted to create a vertical timeline and I came across this page.

http://cssdeck.com/labs/oz2nu681

我复制了代码，有些地方遇到了麻烦

I copied the code and there are some things which I am having trouble with.

• &:: after


• &:: before


• .radio：选中;
  & + .relative;

我试图将其更改为样式表代码，但被卡在这里。
CSS代码也不同于传统的CSS文件。

I tried to change it into that stylesheet code but got stuck here. Also the CSS code is different than what a traditional CSS file contains. What is this code and how do i use it?

推荐答案

& :: after 实际上在CSS中什么都不是，但是它是SASS / SCSS的功能，并且可能是在这样的上下文中编写的：

&::after is actually nothing in CSS, but it is a feature of SASS/SCSS and is probably written in a context like this:

li {
  /* some style 1 */

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

}

编译为：

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

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

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

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

EDIT You can't use the ampersand in a .css file, as it has no meaning, you can only use it in sass/scss files that are compiled to CSS using a SASS pre-processor.

关于SASS中的&符号的博客文章（不是我的）：

Blog post (not mine) about ampersand in SASS:

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

编辑2
进一步的答案：

EDIT 2 Further answers:

其他一切都是原始CSS， ::之后， ::之前是伪元素， .relative 和 .radio 是类选择器，：已选中是输入类型的伪类单选框和复选框，而 + 是相邻的兄弟选择器

Everything else is vanilla CSS, ::after, ::before are pseudo elements, .relative and .radio are class selectors, :checked is a pseudo class for input types radio and checkbox, and + is an adjacent sibling selector

MDN应该是您使用CSS文档的权限之一，所以我选择链接到他们的页面，而不是简单地复制并将其文档内容粘贴到此答案中。

MDN should be (one) of your authorities for CSS documentation, so I chose to link to their pages rather than simply copy and paste the contents of their documents into this answer.

编辑3

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

I realized I didn't specifically state what & + .relative is.

当我说

时，我最初提到它

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

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

OP链接的示例中包含以下代码：

In the OPs linked example there is this code:

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

当您考虑&插入父选择器，您将看到如下编译的CSS：

When you consider that & pulls in the parent selector you'll see compiled CSS as this:

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

使用普通英语，如果您会：

In "plain english", if you will:

具有单选类别的元素，将使用紧邻的同级元素进行检查，该同级元素具有相对类别，并且该元素的子元素的标签名称为label。

An element with a class of radio that is checked with an immediate adjacent sibling element that has a class of relative and a child of that element with a tag name of label.

这篇关于CSS中的& :: before和& :: after是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！