html - 引用与父级相同的属性值的 CSS 选择器

标签 html css css-selectors

<分区>

我有一个 div 列表,其中一次只显示一个。这取决于 parent 拥有的属性值。例如:

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;}

背后的原因是我不确定我可能有多少个 child ,我想看看是否有一种方法,在纯 CSS 中,避免写出所有的可能性

最佳答案

因此,您需要一个通用的 descendant selector ,您祖先的 data-something 属性的值始终与您后代的 data-something 属性的值相同,无论该值是多少?

不幸的是,这在 CSS 中是不可能的!

关于html - 引用与父级相同的属性值的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42089864/

相关文章:

html - Azure 自定义 404 页面

android - Android Studio1.3.1无法显示右上角菜单栏

jquery - 使用 jQuery 将样式应用于单击元素的所有实例

python - 处理 BeautifulSoup CSS 选择器中的冒号

css - 为什么:first-child:before target all elements?

html - 如何在 codeigniter 中使用 CSS

html - 导航栏背景图像仍然被背景颜色覆盖

html - 我应该在 href =""中使用 & 还是在 HTML4 和 HTML5 中使用 & 就足够了?

html - 无法将 Bootstrap 列设置为不显示

javascript - 如何在单击按钮时重复向变量添加 +1?