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

Question

如何在10个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中添加一个你想要颜色的类：“red-color”

.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>