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

Posted 2023-03-05

【中文标题】CSS 中的 &::before 和 &::after 是啥？ [关闭]

【英文标题】：What is &::before, &::after in CSS? [closed]CSS 中的 &::before 和 &::after 是什么？ [关闭]

【发布时间】：2015-01-01 20:32:45

【问题描述】：

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

http://cssdeck.com/labs/oz2nu681

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

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

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

& 是 SASS，而不是 CSS。

这是 SASS，而不是“纯” CSS。点击扳手图标，您会看到。

请限制自己每个问题回答一个问题。根据您的解释，您似乎在这里有大约 8 个问题，因此很可能会因为过于宽泛而被关闭。

@Quentin 实际上，如果您查看下面的答案，您会发现 OPs 问题可以用一句话来回答......“这是 SASS”。 OP 将需要查找 SASS 并查看它是否对所考虑的项目有用，但总的来说它已得到解答。

【参考方案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的子元素进行检查。

【讨论】：

那么:after 是什么意思？还是:before？还是:checked？或+？或.relative？或.radio？您只触及了问题所问的其中一件事。

@Quentin ____ Adam：不要浪费你的答案去详细描述所有这些。如果您觉得需要指向 W3Schools 或其他一些有用的资源。您的回答非常好，因为它回答了这里需要的内容。

w3schools.com/cs-s-ref/sel_after.asp 在这里查看！

来到这里说我同意@Quentin，我带着同样的问题来到这里，仍然不知道他们在做什么。