Question

＆＃13;

.left li i { border: 1px solid red; }
.left li:nth-child(3) > i{ border: 1px solid black; }

＆＃13;

<div class="left">
  <ul>
    <li>some data<i>icon</i></li>
    <li>some data<i>icon</i></li>
    <li>some data<i>icon</i></li>
  </ul>
</div>

＆＃13;

现在我想对每个 i 项目应用特定规则，例如边框颜色，但我的选择器无法正常工作。第一个选择器工作正常，但第二个不是，我不能定位例如第一个项目，然后应用不同的边框颜色，然后为第二个，第三个或第四个项目应用不同的边框颜色，或者在这种情况下{{1} } tag。

Answer 1

请参阅jsfiddle：http://jsfiddle.net/zj9v81t7/21/

<ul>
<li>some data<i>icon</i></li>
<li>some data<i>icon</i></li>
<li>some data<i>icon</i></li>
</ul>
css
    ul li i { border: 1px solid red; }
    ul li:nth-child(2) > i{ border: 1px solid blue; }
ul li:nth-child(3) > i{ border: 1px solid black; }

如何在无序列表中选择第n个（每个）子项？

1 个答案: