html-我可以仅使用CSS隐藏不具有某些特定数据值或内容的元素吗?

前端之家收集整理的这篇文章主要介绍了html-我可以仅使用CSS隐藏不具有某些特定数据值或内容的元素吗? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想删除不具有“联合状态”的数据值/内容的跨度类.我只能使用CSS做到这一点.我不能nth-child()函数,因为元素的位置不是恒定的

<div class="adsw-attribute-option">
   <span class="Meta-item-text sku-set" data-value="china">China</span>
   <span class="Meta-item-text sku-set" data-value="germany">Germany</span>
   <span class="Meta-item-text sku-set" data-value="italy">Italy</span>
   <span class="Meta-item-text sku-set" data-value="united-states">United States</span>
</div>
最佳答案
我们可以使用伪类:not和目标使用属性选择器来实现.

我已经更新了代码段,这对您有用吗?

span:not([data-value="united-states"]){
  display: none;
}
<div class="adsw-attribute-option">
   <span class="Meta-item-text sku-set" data-value="china">China</span>
   <span class="Meta-item-text sku-set" data-value="germany">Germany</span>
   <span class="Meta-item-text sku-set" data-value="italy">Italy</span>
   <span class="Meta-item-text sku-set" data-value="united-states">United States</span>
</div>

猜你在找的HTML相关文章