CSS选择器仅显示第一部分的内容

Question

我有一个JavaScript切换开关，因此默认情况下T需要尝试折叠所有部分-通过插入

ul.section-content{
  display:none;
}

，它正在工作。但是，当我尝试隐藏first-child或不隐藏first-child时，它就无法正常工作。

.cscr .csec .section ul:first-of-type {
  display: none;
}

<div class="cscr">
  <ul class="csec">
    <li class="section">
      <div class="section-header">
        <div class="section-left">
          <h5>section01</h5>
          <p>hello1</p>
        </div>
        <div class="section-meta">
        </div>
      </div>
      <ul class="section-content">  
        <li class="course-item">
          <h1>lesson01</h1>
        </li>
      </ul>                        
    </li>

    <li class="section">
      <div class="section-header">
        <div class="section-left">
          <h5>section02</h5>
          <p>hello1</p>
        </div>
        <div class="section-meta">
        </div>
      </div>
      <ul class="section-content">           /* to hide this */
        <li class="course-item">
          <h1>lesson02</h1>
        </li>
      </ul>                             /* to hide this */
    </li>

  </ul>
</div>

第二种情况： 以及如何在非第一个孩子的帮助下仅显示第一个而不显示其他

screenshot of what is needed

Answer 1

您想要这样的东西吗？ https://codepen.io/anon/pen/YOOXOv。将CSS属性更改为所需的任何属性。

在这里，您要选择除第一个部分以外的所有部分，然后在其中选择ul。