CSS选择器引用与父级相同的属性值[重复]答案

【问题标题】：CSS selector that refers to an attribute value which is the same as the parent [duplicate]CSS选择器引用与父级相同的属性值[重复]
【发布时间】：2017-02-07 21:03:08
【问题描述】：

我有一个 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 中避免写出所有的可能性。

【问题讨论】：

唯一的方法是对所有选项都这样做，就像你在第一个示例中所做的那样。我认为您正在使用某种服务器端语言来输出这些数据属性？如果是这样，你应该让你的服务器端语言做复杂的事情（毕竟 css 只用于样式），并在你的属性与其父属性匹配时添加一个类
@Pete 如果这是我最终可能会使用 JavaScript 的唯一方法，因为我不知道会有多少项目，而且我不想在 CSS 中创建 1000 种可能性。
@NenadVracar 谢谢你的建议。嗯，事情是用 JavaScript 改变了父级。你的建议是一样的，但反过来，所以它不能解决问题。

标签： html css css-selectors

【解决方案1】：

所以，您想要一个通用的descendant selector，其中您祖先的data-something 属性的值始终与您后代的data-something 属性的值相同，无论该值是什么？

很遗憾，CSS 无法做到这一点！

【讨论】：

感谢您的回答，但这并不能解决问题。
@Alvaro：嗯，你确实说的是“属性”，而不是“属性值”，尽管从问题来看，很明显你的意思是后者。
@BoltClock 谢谢，问题已编辑。
@Alvaro ：所以this 不是您想要实现的目标？请解释一下你在找什么，然后...
@JohnSlegers 显示或隐藏除特定元素之外的子元素，如果可能的话，这将是一种非常方便的方式。但我将不得不依赖于一个简单的“活动”类更改和 JavaScript。谢谢你的时间:)