[英]CSS: select item by data-filter attribute
I have to remove certain items from a nav, which differ by their data-filter attribute. 我必须从导航中删除某些项目,这些项目的数据过滤器属性不同。 How can I refer to the specific list-items? 如何引用特定的列表项? Such as, if I wanted to remove the item by data-filter ".category-xyz": 例如,如果我想通过数据过滤器“ .category-xyz”删除该项目:
<li class="filter" data-filter=".category-xyz"><span>xyz</span></li>
I tried loads - all without any errors - nothing finds the specific list-item. 我尝试加载-全部都没有任何错误-没有找到特定的列表项。 I tried: (all each) 我试过了:(每个)
.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;
}
Somebody help? 有人帮忙吗?
Your li
opening tag is incomplete without >
Use prefix selector. 没有>
使用前缀选择器,您的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>
You are missing a >
in your HTML after xyz"
在xyz"
之后的HTML中,您缺少一个>
xyz"
Other than that, your last 3 CSS rules should work. 除此之外,您的最后3条CSS规则应该可以使用。
Here is a working JS Fiddle . 这是工作中的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>
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.