html - 通过 CSS 选择器在所有 html 中选择标签的第一次和最后一次出现

Question

我有这个html标签

<div>
  <ol>
    <li>First</li>
    <li>Foo</li>
    <li>Foo</li>
    <li>Foo</li>
  </ol>
</div>
<div>
  <ol>
    <li>Foo</li>
    <li>Foo</li>
    <li>Foo</li>
    <li>Last</li>
  </ol>
</div>

我想更改整个 html 标签的前 li 和最后 li 的背景。我该怎么做？

我使用了这个 css，但它没有像我预期的那样工作

li:first-child {
  background: #900
}

li:last-child {
  background: #900
}

p.s 我需要在 IE8+ 上运行的解决方案。

jsfiddle

Answer 1

假设您的 HTML 结构不会改变，您可以:

div:first-child li:first-child {
    background: #900;}

div:last-child li:last-child {
    background: #900;}