HTML CSS会隐藏除最后一个元素之外的所

Question

我要隐藏div中除了最后一个之外的所有元素，这是我的HTML代码：

<div id="TOPsession">
    <a id="link1" href="exc.txt">
        <img src="imagens/header/exc.png" align="center">
            <label id="label1">Label</label>
    </a>

    <a href="#" id="session">Session</a>
    <label id="lbar" style="color: #666;">|</label>
    <select id="sel"> 
        <option>German</option>
        <option>Ingles</option>
    </select>
</div>

我在网上搜索，我发现这个css代码隐藏了除最后一个元素之外的所有内容：

#TOPsession:not(:last-child){
        visibility: hidden;
    }

但这隐藏了所有元素，有人知道我做错了什么？谢谢你的帮助。

Answer 1

您可以使用#TOPsession > *:not(:last-child)，这将选择TOPsession除:last-child以外的所有直接子女。

如果您不使用>，您还将删除最后一个元素中除最后一个元素DEMO内的最后一个元素之外的所有元素

＆＃13;

＆＃13;

#TOPsession > *:not(:last-child) {
  visibility: hidden;
}

＆＃13;

<div id="TOPsession">
  <a id="link1" href="exc.txt">
    <img src="imagens/header/exc.png" align="center">
    <label id="label1">Label</label>
  </a>

  <a href="#" id="session">Session</a>
  <label id="lbar" style="color: #666;">|</label>
  <select id="sel">
    <option>German</option>
    <option>Ingles</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;