Question

我必须从导航中删除某些项目，这些项目的数据过滤器属性不同。我如何参考具体的列表项？例如，如果我想通过数据过滤器删除该项目＆＃34; .category-xyz＆＃34;：

<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

user_has_food

后，您在HTML中遗漏了>

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

这是一个有效的JS Fiddle。

xyz"

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

希望这有帮助。

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

2 个答案: