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

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 选择器

Using nested pseudo css selectors with react-emotion

reactjs

styled-components