是否有一个 css 选择器选择元素的属性等于其父属性？答案

【问题标题】：Is there a css selector that selects an attribute of an element equals to its parent's attribute?是否有一个 css 选择器选择元素的属性等于其父属性？
【发布时间】：2020-09-01 17:58:42
【问题描述】：

我正在使用这种技术根据其父项的data-current 属性过滤项目：

const ul = document.querySelector('ul');
document.querySelector('select').addEventListener('change', ({ target }) => ul.setAttribute('data-current', target.value));

ul li {
  display: none;
}

ul[data-current='vegetable'] li[data-category='vegetable'],
ul[data-current='fruit'] li[data-category='fruit'],
ul[data-current='dessert'] li[data-category='dessert'],
ul[data-current='misc'] li[data-category='misc'],
ul[data-current='all'] li {
  display: block;
}

<select>
  <option value="all">All</option>
  <option value="vegetable">Vegetable</option>
  <option value="fruit">Fruit</option>
  <option value="dessert">Dessert</option>
  <option value="misc">Misc</option>
</select>

<ul data-current="all">
  <li data-category="vegetable">Tomato</li>
  <li data-category="vegetable">Cucumber</li>
  <li data-category="vegetable">Eggplant</li>
  <li data-category="fruit">Apple</li>
  <li data-category="fruit">Banana</li>
  <li data-category="fruit">Orange</li>
  <li data-category="dessert">Cake</li>
  <li data-category="dessert">Chocolate</li>
  <li data-category="misc">Beef Jerky</li>
</ul>

现在它工作得很好，但是你可以看到选择器越来越重，而data-category 填充。此外，如果类别是动态的，那也是不可能的。

有没有这样的选择器，$1 匹配前面的字符串？

ul[data-current=/(.*)/] li[data-category=$1] {
  display: block;
}

实现这种过滤器功能有什么更好的主意？

我不太喜欢使用 javascript 手动隐藏/显示每个元素。

【问题讨论】：

不可能使用 CSS（除非您要为每个可能的值手动添加设置）
所以希望我们在 CSS 中拥有这个功能，这样我们就可以在没有 javascript 的情况下实现更多。
嗯，CSS 应该保持简单、快速和易于解释。恕我直言，您的建议非常复杂。

标签： javascript css css-selectors

【解决方案1】：

在设计语言时，通常需要在功能和简单性之间进行权衡，而 CSS 倾向于简单性。甚至像兄弟选择器和属性选择器这样的功能也直到版本 2 才引入。

您所描述的内容可能偶尔会很有用，但可能 99% 的开发人员不会认为需要它。当前版本的 CSS 没有提供这样做的能力，而且我也看不到任何未来版本的 CSS 允许它，除非他们添加某种通用方式将 XPath 或 Javascript 嵌入到选择器中。（而且这些想法并不在可能的范围之外。）

然而，用 Javascript 实现它非常容易。我在下面的例子中使用了 jQuery，但是不使用 jQuery 也不难......

function updateLists ( node ) {
  node.find('ul[data-current]').each( function ( ix, e ) {
    var val  = e.getAttribute('data-current');
    var list = jQuery( e );
    list.find( '.current-category' ).removeClass( 'current-category' );
    list.find( 'li[data-category=' + val + ']' ).addClass( 'current-category' );
  } );
}

// Call updateLists whenever the category gets changed
updateLists( jQuery( document.body ) );

ul[data-current] > li {
  display: none;
}

ul[data-current] > li.current-category {
  display: block;
}

【讨论】：