html - CSS隐藏的第一个 child

Question

我有一个不可编辑的 HTML，它不能改变任何东西。

我需要隐藏第一个复选框，然后显示第二个。它是在 CSS 中完成的，但不知何故它没有按预期工作。 这是它的 LIVE样本。

请帮忙。

.treeview-container .treeview-item:first-child .form-check label input[type="checkbox"] {   
                visibility: hidden;      
     }

    <div class="treeview-container">
        <div class="treeview-item">
            <div class="form-check">
              <label class="form-check-label">
                  <input type="checkbox" />First Box
               </label>
            </div>
            <div class="treeview-item">
                <div class="form-check">
                  <label class="form-check-label">
                      <input type="checkbox" />Second Box
                   </label>
                </div>
            </div>
        </div>
    </div> 


    

Answer 1

问题是 .treeview-item:first-child 的目标是两个复选框各自的 .form-check 容器(因为他们都是他们 parent .treeview-item 的第一个 child )。

这可能有点违反直觉，正如您所期望的那样 :first-child 伪选择器只针对 .treeview-item 的子项的非常第一次出现。事实并非如此，因为 :first-child 选择器实际上针对 .treeview-item 父级的 each 的第一个子级。

为了纠正这个问题，您可以简单地使用两个 child combinator selectors (>) 以确保 .treeview-item 是 .treeview-container 的直接子级，而 .form-check 是直接.treeview-item 的 child 。

这可以从以下方面看出:

.treeview-container > .treeview-item > .form-check label input[type="checkbox"] {
  visibility: hidden;
}

<div class="treeview-container">
  <div class="treeview-item">
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" />First Box
      </label>
    </div>
    <div class="treeview-item">
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" />Second Box
        </label>
      </div>
    </div>
  </div>
</div>

希望对您有所帮助! :)