Question

如何计算<li>内的儿童<ul>？

如果<li>在一个<ul>中小于或等于6 <li>，我想隐藏上一个<ul>。

CODE

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span></li>
</ul>

Fiddle

Answer 1

您可以使用nth-child()（或+）加上相邻选择器li { background: red } .more { background: green } li:nth-of-type(5) + li { display: none }

<h1> 6 items </h1>

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
</ul>

<h1> 5 items </h1>


<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
</ul>

<h1> 7 items </h1>

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
  <li>Seven</li>
</ul>

outputDirectory

Answer 2

如果您需要隐藏.more元素，当且仅当（因为我已经从问题中理解）您的列表有6个列表项，那么您可以这样做以这种方式

li:nth-last-child(6):first-child ~ .more {
  display: none;
}

当从最后一个元素开始计算时，nth-last-child(6)元素也是第一个子元素，那么列表必须有正好6个列表项。

Codepen example

从示例中可以看出，在第一个列表中，6 ^th元素不受影响，因为列表不仅 6个列表项

Answer 3

使用以下代码实现此目的：

＆＃13;

li:nth-of-type(6):last-child {
  display:none;
}

＆＃13;

<h3>Remove nothing</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
  <li>Test #6</li>
  <li>Test #7</li>
</ul>
<h3>Remove #6</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
  <li>Test #6 (hide this)</li>
</ul>
<h3>Remove nothing</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
</ul>

＆＃13;

通过CSS计算父母中的孩子

3 个答案: