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>