如何使用css

Question

如何使用CSS显示第一级li标签并隐藏其余标签？这样我们只能看到第一级瓷砖和第二/第三级瓷砖被隐藏。为了清楚起见，接下来的想法是，使用jQuery使其级联友好但一次只有一件事:)请找到我这里嵌入的代码...

如果您有任何疑问，请告诉我。

＆＃13;

＆＃13;

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

ul li:nth-of-type(1) {
display: block;
}

＆＃13;

<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
              Lily
            </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
              Sen
            </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您定义了容器div时，您必须使用容器类使用>运算符来定位特定级别，添加这两个类将为您完成工作.chartArea ul li将隐藏所有级别li和.chartArea > ul > li {只会影响第一级。

.chartArea ul li
{
  display: none;
}

.chartArea > ul > li {
  display: block;
}

＆＃13;

＆＃13;

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

.chartArea ul li {
  display: none;
}

.chartArea>ul>li {
  display: block;
}

＆＃13;

<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
            Lily
          </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
                Sen
              </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS child combinator (>) 。

指定li > ul > li将定位li元素本身的孙子元素的任何<li>个元素。 但是，请注意，这也适用于后续 <li>孙子孙女（初始<li>元素的曾孙子）。

您可以通过.chartArea直接使用.chartArea > ul > li > ul > li来防止这种情况发生。虽然不是非常必要（如果你只是隐藏了孙子孙女，那些伟大的孙子孙女也将被隐藏），最好是 more specific 。这是因为如果你要使用visibility: hidden而不是display: none，那么曾曾的曾孙子将仍然保留DOM流。

因此，您正在寻找：

.chartArea >  ul > li > ul > li {
  display: none;
}

可以在以下内容中看到：

＆＃13;

＆＃13;

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

ul li:nth-of-type(1) {
  display: block;
}

.chartArea>ul>li>ul>li {
  display: none;
}

＆＃13;

<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
            Lily
          </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
                Sen
              </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）