在特定列表项后添加单个图像

Question

这可能是一个有点愚蠢的问题，但让我围绕某些css造型。我想添加一个定位特定li项目的图片。

这将在所有li项目之后添加图像。

.menuStyling li:after{
 content: url('../img/arrowActive.png');
}

哪种方法只是针对一个li项目的最佳方式？

Answer 1

我会使用nth-child选择器来选择您的特定li，然后:after来选择数据。

.menuStyling li:nth-child(2):after {
  content: url('http://www.famfamfam.com/lab/icons/silk/icons/feed.png');
}

<ul class="menuStyling">
  <li>Foo</li>
  <li>bar</li>
  <li>baz</li>
  <li>hello</li>
</ul>

Answer 2

使用nth-child选择器，如下所示：

.menuStyling li:nth-child(2):after{
 content: url('../img/arrowActive.png');
}

第二个<li>将有图像。

详情了解nth-child here

请参阅下面的代码段

＆＃13;

＆＃13;

.menuStyling li:nth-child(2):after {
  content: " this is after child  list item 2";
  color: green
}

＆＃13;

<ul class="menuStyling">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;