CSS：按数据过滤器属性选择项目

【问题标题】：CSS: select item by data-filter attributeCSS：按数据过滤器属性选择项目
【发布时间】：2017-09-24 04:12:02
【问题描述】：

我必须从导航中删除某些项目，它们的数据过滤器属性不同。如何参考特定的列表项？例如，如果我想通过 data-filter ".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;
}

有人帮忙吗？

【问题讨论】：

看我的回答。这是你想要达到的吗？
啊，我在这里打错了。在我的原始代码中，
已关闭。

更新：问题似乎出在“display:none;”上。我试图让元素的背景变成蓝色——效果很好。切换背景：蓝色；显示：无； --> 什么都没有。仅供参考，这是 wordpress！

标签： css wordpress list filter attributes

【解决方案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>

【讨论】：

还是没有解释
@dippas 满意吗？
更新：问题似乎出在“display:none;”上。我尝试将元素的背景设为蓝色 - 效果很好。

【解决方案2】：

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>

希望这会有所帮助。

【讨论】：