你如何在 SASS 中定义属性选择器？

Posted 2023-03-06

【中文标题】你如何在 SASS 中定义属性选择器？

【英文标题】：How do you define attribute selectors in SASS?

【发布时间】：2011-06-14 22:06:00

【问题描述】：

在 CSS 中，you can do this:

input[type=submit] 
  // properties

它对表单按钮的样式非常有用。

你如何在 SASS 中做同样的事情？

【问题讨论】：

我只使用 SCSS，在这种情况下它可以正常工作。

【参考方案1】：

你也可以这样嵌套

input
  &[type="submit"]
    .... 
  &[type="search"]
    .... 

【讨论】：

我非常喜欢这种方法，因为您经常会做这种事情来从精灵、工具栏或社交链接集中提供正确的图像。

添加双引号不起作用。这不应该是正确的答案。

&[type='submit']

有人可以提供完整且完整的正确答案，包括一些正在设置的值吗？

【参考方案2】：

This converter website 说：

input[type=submit]
  // properties

【讨论】：

链接已失效

@MarceloVelasquez 我已经编辑了答案并更新了链接

【参考方案3】：

我在我的项目中使用下面的那个。

.bg-brand-3 
  background-color: black;
  &[type="button"]:enabled 
    &:hover 
      background-color: orange;
    
    &:active 
      background-color: green;
    
  
  &[type="submit"] 
    // css
  

:enable 与:not(:disabled) 含义相同