时间戳

首页 > 解决方案 > 如何只显示一个同名的班级

html - 如何只显示一个同名的班级

问题描述

在我的代码中

<ol class="items">            
    <li class="item">
       <span class="filter-label">Category</span>
       <span class="filter-value">Fashion</span>                                                                                                                                                    
       <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=226" title="Remove Category Fashion">
           <span>Remove This Item</span>
       </a>                                                                    
    </li>            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Deal of day-Home</span>                                                                                                                               
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=109" title="Remove Category Deal of day-Home">
           <span>Remove This Item</span>
         </a>                                               
    </li>
</ol>

现在在这里我只想显示一个类别，否则所有类别都需要显示：现在我已经尝试过了

.filter-label{
    display:none;
}
.items:nth-of-type(1) >.filter-label:first-child {
  display:block;
}

但它不工作。

我怎样才能只显示一个类别？任何帮助将不胜感激谢谢

标签： htmlcss

解决方案

:not您可以使用选择器来实现这一点

.items li:not(:first-child) .filter-label {
  display: none;
}
<ol class="items">            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Fashion</span>                                        
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=226" title="Remove Category Fashion">
          <span>Remove This Item</span>
        </a>                                                                    
    </li>            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Deal of day-Home</span>                   
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=109" title="Remove Category Deal of day-Home">
           <span>Remove This Item</span>
        </a>                                               
    </li>
</ol>

推荐阅读