css - 隐藏一个 <li> 元素类

Question

我想隐藏这个位:<li class="categories">Kατηγορίες<ul>如下面的代码所示(另见此处 https://poiimata.com/poets/ ):

<li class="categories">Kατηγορίες<ul>   
<li class="cat-item cat-item-123">
    <a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
    <a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>

我尝试使用

.categories {
  display:none;  
}

但结果是隐藏该项(整个列表)下方的所有项。

Answer 1

发生这种情况是因为您的 HTML 代码无效:

<li class="categories">Kατηγορίες<ul>
_________________________________^^^^

浏览器会将您的代码评估为以下格式，这就是为什么您所有的 li 都被隐藏的原因:

<ul>
    <li class="categories">Kατηγορίες
       <ul>
          <li class="cat-item cat-item-123"><a href="https://poiimata.com/category/robert-frost/">Robert Frost</a>
          </li>
          <li class="cat-item cat-item-124"><a href="https://poiimata.com/categoryshlain-goldberg/">Shlain</a>
          </li>
       </ul>
    </li>
</ul>

应该是:

<ul>
  <li class="categories">Kατηγορίες</li>
  <li class="cat-item cat-item-123"><a href="https://poiimata.com/category/robert-frost/">Robert Frost</a>
  </li>
  <li class="cat-item cat-item-124"><a href="https://poiimata.com/categoryshlain-goldberg/">Shlain</a>
  </li>
</ul>

片段:

.categories {
  display: none;
}

<ul>
  <li class="categories">Kατηγορίες</li>
  <li class="cat-item cat-item-123"><a href="https://poiimata.com/category/robert-frost/">Robert Frost</a>
  </li>
  <li class="cat-item cat-item-124"><a href="https://poiimata.com/categoryshlain-goldberg/">Shlain</a>
  </li>
</ul>