如何在UL的十个列表中给出颜色前五个李或后五个李

Question

如何在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>

Answer 1

前五个：使用: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>

Answer 2

您只需在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.red-color{color:red}

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