CSS中的&:: before,&::之后是什么? [关闭]

问题描述 投票:13回答:1

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

http://cssdeck.com/labs/oz2nu681

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

  • &::后
  • &::之前
  • .radio:检查; &+ .relative;

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

html css
1个回答
27
投票

&::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,qazxsw poi,qazxsw poi是qazxsw poi,qazxsw poi和::after::beforepseudo elements是输入类型收音机和复选框的.relative,而.radioclass selectors

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

编辑3

我意识到我没有具体陈述:checked是什么。

我最初提到它时提到了它

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

在OPs链接示例中,有以下代码:

pseudo class

当你考虑+时,你会看到编译的CSS如下:

adjacent sibling selector

在“普通英语”中,如果你愿意:

具有一类无线电的元素,该元素使用具有相对类的直接相邻兄弟元素进行检查,该元素的子元素具有标签名称label。

© www.soinside.com 2019 - 2024. All rights reserved.