Question

所以我正在建立一个由三个类别组成的告示板。 Error，Warning和Information。这些项目的颜色分别为red，orange和green。但是我只希望将颜色应用于bullets。

这是清单：

<ul class='well well-large custom-bullet'>
        <li >First item</li>
        <li >Second item</li>
        <li >Third item</li>
        <li >Fourth item</li>

    </ul>

就像你可以看到的那样，我有一个custom-bullet类，它只是将list items变成了一个bootstrap glyphicon。

css类：

.custom-bullet li{
        display:block;
    }
    .custom-bullet li:before{

    content: "\e034";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #CCCCCC;
    }

所以我想要的是有条件地设置子弹项目的格式以与类别相关联。现在我将提供条件和数据库值但是我想知道如何将我的条件与css着色链接起来？

Answer 1

给每个li一个class。通过将li放在CSS中来获取具体的class name：.custom-bullet li.red::before（此处red是类名）。现在，您可以单独为color提供li。

＆＃13;

.custom-bullet li{
        display:block;
    }
.custom-bullet li.red::before{
    content: "\e034";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: red;
    }

.custom-bullet li.green::before{

    content: "\e034";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: green;
    }
.custom-bullet li.yellow::before{

    content: "\e034";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: yellow;
    }
.custom-bullet li.blue::before{

    content: "\e034";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: blue;
    }

＆＃13;

<ul class='well well-large custom-bullet'>
        <li class="red">First item</li>
        <li class="green">Second item</li>
        <li class="yellow">Third item</li>
        <li class="blue">Fourth item</li>

    </ul>

＆＃13;

如何在CSS中列出项目的条件格式

1 个答案: