第一个孩子和第一个类型的选择器不起作用

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">
        <li class="course-item">
          <h1>lesson02</h1>
        </li>
      </ul>
    </li>

  </ul>
</div>

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

screenshot of what is needed

Answer 1

  

我只需要显示第1课，不显示的代码是什么   只有课程1

使用not选择器并选择第一个孩子以外的所有孩子

.cscr .csec li:not(:first-child) {
  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">
        <li class="course-item">
          <h1>lesson02</h1>
        </li>
      </ul>
    </li>
  </ul>
</div>