如何在 JSS 中使用子选择器

Posted 2023-02-22

【中文标题】如何在 JSS 中使用子选择器

【英文标题】：How to use child selectors in JSS

【发布时间】：2018-12-08 05:37:24

【问题描述】：

我正在试验 JSS，看看迁移 Sass 代码库是否现实。我有一个非常基本的 CSS 样式示例，当悬停时，它会修改子节点的样式。

span 
  color: red;


button:hover span 
  color: blue;

<button>
  <span>Click Me</span>
</button>

我不确定如何在 JSS 中编写此代码。我尝试过的东西看起来像：

const styles = 
  button: 
    '&:hover': 
      span: 
        color: 'blue',
      
    
  ,
  span: 
    color: 'red',
  


const  classes  = jss.createStyleSheet(styles).attach()

document.body.innerhtml = `
  <button class=$classes.button>
    <span class=$classes.span>Click Here</span>
  </button>
`

谢谢！

【参考方案1】：

你有没有尝试过：

const styles = 
  button: 
    '&:hover span': 
       color: 'blue',
    
  ,
  span: 
    color: 'red',
  

【讨论】：

谢谢！如果它是一个与元素选择器不匹配的类名，它将如何工作。例如，如果它是someClass。

@JonSakas，在类前加上 $。例如："&:hover $someClass"

当鼠标悬停在按钮上时，这段代码是否会改变所有 span 元素的颜色或嵌套在按钮中的 span 元素？

嗨@deowk，有没有办法使用JSS中的子元素访问父元素

【参考方案2】：

正如@cwouter 的评论中提到的，如果它是一个类名，你可以这样做。

const styles = 
  button: 
    '&:hover $some_class_name': 
       color: 'blue',
    
  ,
  some_class_name: 
    color: 'red',