html - CSS第一个列表项图像其余的红点

Question

如何为列表创建 CSS，其中第一项是图像(居中)，其余项应该是红点。

我不想和他一起工作

<p></p>

之类的。

这是我的代码:

<style>
ul{
    list-style:none;
    margin :0;
    padding:;
}

li:first-child{
    background:url('http://imi.shirtcity.com/gfx/icons/16x16/icon_heart_active.png');
    background-repeat: no-repeat;
    line-height: px;
    padding-left: 20px;
}
li:before{
   content: "• ";
   color: red;
}

</style>
<ul>
    <li>Nulla facilisi.</li>
    <li>Pellentesque habitant morbi</li>
    <li>Quisque vel justo.</li>
    <li>Nullam posuere purus sed arcu.</li>
</ul>

Answer 1

在这种情况下无需使用after 或before。你可以使用 list-style: disc 和背景使用 list-style-image

ul{
    list-style:none;
    margin :0;
    padding:;
}

li {
  list-style: disc;
  color: red;
}

li a {
  color: black;
}

li:first-child{
    list-style-image: url('http://imi.shirtcity.com/gfx/icons/16x16/icon_heart_active.png');
    line-height: px;
}

<ul>
    <li><a>Nulla facilisi.</a></li>
    <li><a>Pellentesque habitant morbi</a></li>
    <li><a>Quisque vel justo.</a></li>
    <li><a>Nullam posuere purus sed arcu.</a></li>
</ul>