有没有办法通过父属性突出显示所选元素？

Question

列表元素选择的经典方法如下：

<ul>
    <li>elem 1</li>
    <li class="selected">elem 2</li>
    <li>elem 3</li>
</ul>

有没有办法像这样只使用CSS选择元素：

<ul data-id="2">
    <li data-id="1">elem 1</li>
    <li data-id="2">elem 2</li>
    <li data-id="3">elem 3</li>
</ul>

我可以创建一个CSS选择器，它将应用于某个属性与父级属性匹配的子级吗？

让我们想象一下，我们以前不知道元素的ID，因为如果我们知道并且有一些它们，我们就可以编写这样的CSS规则：

ul[data-id=1] li[data-id=1],
ul[data-id=2] li[data-id=2],
ul[data-id=3] li[data-id=3] {
    font-weight: bold;
}

这应该有效

但我需要一个针对未知ID的解决方案。

Answer 1

不，你不能通过css实现这一点。在这里当SASS来救援。 在这里了解SASS ..

@for $i from 1 through 3
ul[data-id=#{$i}] li[data-id=#{$i}]{
  font-weight: bold
}