Question

我知道可以设置图像而不是HTML默认项目符号：

list-style-image: url(...);

但是我找不到如何在同一个列表中设置不同图像的方法。 e.G。：显示img_1而不是第一个子弹，而不是接下来的5个子弹img_2 ...

Answer 1

HTML-

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

CSS（在IE 7,8上不起作用） -

ul li:nth-child(1){
list-style-image:url('image1.png');
}
ul li:nth-child(2){
list-style-image:url('image2.png');
}
ul li:nth-child(3){
list-style-image:url('image3.png');
}

所有浏览器的CSS，包括IE 7,8

ul li:first-child{
list-style-image:url('image1.png');
}
ul li:first-child + li{
list-style-image:url('image2.png');
}
ul li:first-child + li + li{
list-style-image:url('image3.png');
}
ul li:first-child + li + li + li{
list-style-image:url('image4.png');
}

Answer 2

只需在LI元素中添加另一个类

<ul class="navlist">
    <li class="img_1">element1</li>
    <li class="img_2">element2</li>
</ul>
<style>
.navlist li.img_1
{
padding-left: 10px;
background-image: url(images/image1.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
.navlist li.img_2
{
padding-left: 10px;
background-image: url(images/image2.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
</style>

Answer 3

您需要使用nth-child属性

CSS

li:nth-child(1){list-style-image:url(image)}

以下是演示http://jsfiddle.net/5VB2u/

Answer 4

我认为你可以用类

来做到这一点

<li class="first"></li>
<li class="second"></li>
...

li.first {
  ⋮ declarations
}

li.second {
  ⋮ declarations
}
...

或nth-child selector

li:nth-child(1) {
  ⋮ declarations
}

li:nth-child(2) {
  ⋮ declarations
}
...

Answer 5

您必须/可以使用列表项中的类：

<ul>
  <li class="bar>
   <a href="#" title="foo">Foo</a>
  </li>
  <li class="foo>
   <a href="#" title="bar">Bar</a>
  </li>
</ul>

图片的CSS作为<li>

的项目符号

ul {
  list-style: none;
}
li {
 padding-left: 25px; /*adjust to your needs*/
}
li.bar {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo {
  background: url(img_1.png) no-repeat 0 50%;
}

图片的CSS作为<a>

的项目符号

ul {
  list-style: none;
}
li a {
 padding-left: 25px; /*adjust to your needs*/
 display: block;
}
li.bar a {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo a {
  background: url(img_1.png) no-repeat 0 50%;
}

带有不同图像的HTML列表作为项目符号

5 个答案: