html - 如何给UL的十个 list 中的前五个Li或最后五个Li赋予颜色？

如何为UL的十个清单中的前五个或最后五个Li赋予颜色？

.list-inline{margin:0; padding:0;}
.list-inline > li{list-style:none; display:inline-block; float:left; background:#000; color:#fff; padding:6px 12px; text-align:center;}
.list-inline > li.class-name?{}

<ul class="list-inline">
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
	<li>Example</li>
</ul>

最佳答案

前五个：使用:nth-child(-n+5)

.list-inline {
  margin: 0;
  padding: 0;
}

.list-inline>li {
  list-style: none;
  display: inline-block;
  float: left;
  background: #000;
  color: #fff;
  padding: 6px 12px;
  text-align: center;
}

.list-inline>li:nth-child(-n+5) {
  color: red
}

<ul class="list-inline">
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
</ul>

最后五个：使用:nth-last-child(-n+5)

.list-inline {
  margin: 0;
  padding: 0;
}

.list-inline>li {
  list-style: none;
  display: inline-block;
  float: left;
  background: #000;
  color: #fff;
  padding: 6px 12px;
  text-align: center;
}

.list-inline>li:nth-last-child(-n+5) {
  color: red
}

<ul class="list-inline">
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
</ul>