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

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
}