Question

遇到一个奇怪的问题。

以下是两段代码。其中一个效果很好而另一个只是没有。

这项工作

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // Some other styles
  }

  :first-child:after {
    content: 'F';
  }
`
// After get applied succesfully to the first child

这不是

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // some other styles

    :after {
      content: 'F';
    }
  }
`
// After get applied to all nth child.

我正在使用react-emotion。

这种行为是打算还是我错过了什么？我希望实现:after只应通过使用与第二个类似的方法应用于first-child。

Answer 1

我认为嵌套:after

的代码中存在错误

如果我更正，那么更改将解决您的问题，将嵌套的:after更改为&:after，如下所示：

const StyledButton = styled('button')`
    // Some styles here

    &:first-child {//<====== note the & here
        // some other styles

        &:after { //<====== note the & here
           content: 'F';
        }
    }
}

&是父选择器的占位符，因此上面的代码将编译为：

button:first-child {
    // some other styles
}
button:first-child:after {
      content: 'F';
}

编辑：Sandbox with working example

希望这有帮助！

`

使用带有react-emotion的嵌套伪css选择器

1 个答案: