CSS:通过数据过滤器属性选择元素

Question

我必须从导航中删除某些元素，它们的数据过滤器属性不同。如何引用特定的列表项？ 例如，如果我想通过数据过滤器“.category-xyz”删除元素:

<li class="filter" data-filter=".category-xyz"><span>xyz</span></li>

我尝试加载 - 全部没有任何错误 - 没有找到特定的列表项。我试过了:(每个)

.filter-holder ul:nth-child(3){
    display:none;
}

.filter .category-xyz{
    display: none;
}

.filter-holder ul li[data-filter*=".category-xyz"]{
display: none;
}

li[data-filter=".category-xyz"]{
    display:none;
}

.filter-holder ul li[data-filter|=category-xyz]{
display: none;
}

有人帮忙吗？

Answer 1

在 xyz"

之后，您的 HTML 中缺少一个 >

除此之外，您的最后 3 个 CSS 规则应该有效。

这是一个有效的 JS Fiddle .

li[data-filter=".category-xyz"]{
    display:none;
}

<div class="filter-holder">
  <ul>
    <li class="filter" data-filter=".category-xyz"><span>xyz</span></li>
    <li class="filter" data-filter=".category-abc"><span>abc</span></li>
    <li class="filter" data-filter=".category-xyz"><span>xyz</span></li>
    <li class="filter" data-filter=".category-abc"><span>abc</span></li>
    <li class="filter" data-filter=".category-xyz"><span>xyz</span></li>
    <li class="filter" data-filter=".category-abc"><span>abc</span></li>
  </ul>
</div>

希望这对您有所帮助。