是否有一個 css 選擇器選擇元素的屬性等於其父屬性？

Question

我正在使用這種技術根據其父項的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 手動隱藏/顯示每個元素。

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