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

没有>使用前缀选择器，您的li开头标签不完整。

element [attribute = "value"]{  
  /*code*/
}

 li[data-filter=".category-xyz"] { background: blue; } li { background: red; } 

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

Answer 2

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

除此之外，您的最后3条CSS规则应该可以使用。

这是工作中的JS小提琴 。

 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> 

希望这可以帮助。