CSS选择器，它引用与父项相同的属性值

Question

我有一个div列表，其中一次只显示一个。这取决于父级具有的属性值。例如：

HTML：

<div id="parent" data-something="c">
  <div class="children" data-something="a"></div>
  <div class="children" data-something="b"></div>
  <div class="children" data-something="c"></div>
  <div class="children" data-something="d"></div>
</div>

CSS：

.children
{display: none;}

#parent[data-something="a"] .children[data-something="a"]
{display: block;}

#parent[data-something="b"] .children[data-something="b"]
{display: block;}

/*  etc. */

有什么方法可以让这个选择器根据父属性值选择相应的子节点？

类似的东西：

#parent[data-something="*"] .children[data-something="*"]
{display: block;}

背后的原因是我不确定我可能拥有多少个孩子，我想知道在纯CSS中是否有办法避免编写所有可能性。

Answer 1

所以，你想要一个通用的descendant selector，其中你的祖先的data-something属性的值与你的后代的data-something属性的值一样，无论是什么那个值是？

不幸的是，CSS无法实现这一点！