嵌套选择器

嵌套选择器是几乎所有的CSS预处理必备的功能,Emotion也不例外。在Emotion中,嵌套选择器可以仿照以下示例来使用。

import { jsx, css } from '@emotion/react'; const paragraph = css` color: blue; a { border-bottom: 1px solid red; color: red; &:hover { border-bottom: 1px solid yellow; color: yellow; } } `; function App() { return ( <p css={paragraph}> Something: <a href="#">links</a> </p> ); }

Tip

符号&在Emotion中是用来代表本级选择器的。