列表中的样式列表项

时间:2017-02-10 16:30:56

标签: css html5

如何在列表中设置列表项的样式?

HTML代码

<span class=bbb>
<ul>
    <li>Arhīva izziņas sagatavošana par studiju laiku vai darba stāžu LLU:
        <ul>
            <li>Septiņu dienu laikā - 5.69 EUR / 4.00 LVL</li>
            <li>Vienas dienas laikā - 8.54 EUR / 6.00 LVL</li>
        </ul>
    </li>
    <li>Akadēmiskās izziņas sagatavošana septiņu dienu laikā (informācija par apgūto studiju programmu, apjomu kredītpunktos, studiju priekšmetiem):
        <ul>
            <li>Ja izziņa nepieciešama par pirmajiem diviem kursiem - 5.69 EUR / 4.00 LVL</li>
            <li>Ja izziņa nepieciešama par visiem kursiem, sākot ar trešo - 9.96 EUR / 7.00 LVL</li>
        </ul>
    </li>
    <li>Akadēmiskās izziņas sagatavošana, izdrukājot no LLU IS programmas - 2.85 EUR / 2.00 LVL</li>
</ul>

CSS代码

.bbb ul{
list-style-image: url('2.png');
}
.bbb li{
 list-style-image: url('1.png');
}

每个子弹都有相同的图像,但我希望列表项li具有不同的子弹类型ul

2 个答案:

答案 0 :(得分:0)

您必须在第二个CSS选择器中更具体。 无论是第一级还是第二级,.bbb li都会适用于 li内的每个 ul元素。

如果您将选择器更改为.bbb ul li ul li(非常具体 - .bbb ul li.bbb li li也可以使用并且不那么具体),您将只能为嵌套更改图像li元素。

答案 1 :(得分:0)

列表样式项应该应用于<ul>代码,而不是<li>。如果你的问题是针对不同的嵌套级别使用不同的项目符号类型,那么最好的方法是给每个<ul>一个类。你也可以做span.bbb > ul这样的事情来选择直接的孩子,但这通常不是一个好习惯。

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image