css - 如何在同一选择器上使用 `&` 和标签

Question

我正在尝试编写一个嵌套选择器来选择具有特定属性的特定标签，例如

<li foo="bar">

要选择此项，li[foo="bar"]可以，但我想将其嵌套在 [foo="bar"] 下使用 scss &符号，因为我还有其他关于 [foo="bar"] 的东西属性(例如 <div foo="bar" class="baz"> )，我想将它们组合在一起。当我尝试时:

[foo = "bar"]{
  &li{
    ...
  }
  &.baz{
    ...
  }
}

它返回一个错误信息 li只能在复合选择器的开头使用，如果我尝试:

[foo = "bar"]{
  li&{
    ...
  }
  &.baz{
    ...
  }
}

然后它说&只能用在复合选择器的开头。我怎样才能正确地做到这一点？

Answer 1

现在正确的语法是 li#{&}。