相关疑难解决方法(0)

我已经知道了:最后一个孩子.但有没有办法选择div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

注意:没有jQuery,只能使用CSS

我有一个无序列表.它有时包含4,5,6或7项.我想知道是否有一个CSS选择器来选择最后两个项目.我意识到这:last-child会让我得到最后一项.是否有"倒数第二个孩子"选择器？或"儿童-2号"选择器？

HTML:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Second from Last Item</li>
  <li>Last Item</li>
<ul>

CSS:

ul li:last-child, ul li:last-child-1 {
  // Do something
}

我意识到:last-child-1不是选择器,但我希望有类似的东西.任何帮助都将是非常有用的.

我有一个列表，最多可以包含 5 个项目。

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

每个列表项的10%宽度都会增加。我正在使用：

ul li:nth-child(1) {
  width: 60%;
}
ul li:nth-child(2) {
  width: 70%;
}
ul li:nth-child(3) {
  width: 80%;
}
ul li:nth-child(4) {
  width: 90%;
}
ul li:nth-child(5) {
  width: 100%;
}

最后一项应该是 100%

但是当我的列表项少于 5 个时会发生什么？例如，如果有 3 个列表项，最后一个将是80%，而不是100%;

我尝试使用：

ul li:last-child {
  width: 100%;
}

这使最后一项全宽，但前面的将不尊重 10%增量规则。

有什么办法可以做类似...

ul li:last-child {
  width: 100%;
}
ul li:first-before-last {
  width: 90%;
}
ul li:second-before-last { …