关于css3：如何在不使用任何图像或span标签的情况下通过CSS在UL / LI html列表中设置Bullet颜色


How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

本问题已经有最佳答案，请猛点这里访问。

想象一下带有一些

  • 项的简单未排序列表。 现在，我已经通过list-style:square;将子弹定义为方形，但是，如果我用color: #F00;设置

  • 项的颜色，那么一切都变成红色！

    虽然我只想设置方形子弹的颜色。 是否有一种优雅的方式来定义CSS中子弹的颜色......

    ...不使用任何精灵图像也不使用span标签！

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <ul>


    <li>
    Item 1
    </li>


    <li>
    Item 2
    </li>


    <li>
    Item 3
    </li>


    <ul>

    CSS

    1
    2
    3
    li{
       list-style:square;
    }
    相关讨论

    最常见的方法是这样做：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      padding-left: 1em;
      text-indent: -.7em;
    }

    li::before {
      content:"?";
      color: red; /* or whatever color you prefer */
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <ul>

     
    <li>
    Foo
    </li>

     
    <li>
    Bar
    </li>

     
    <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>


    </ul>

    JSFiddle：http：//jsfiddle.net/leaverou/ytH5P/

    将适用于所有浏览器，包括版本8及更高版本的IE。

    相关讨论

    浏览前一段时间，发现这个网站，你试过这个替代方案吗？

    1
    2
    3
    li{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
    }

    听起来很难，但你可以在这里制作自己的png图像/模式，然后复制/粘贴你的代码并自定义你的子弹=)仍然优雅？

    编辑：

    按照@ lea-verou关于另一个答案的想法并应用这种外部源代码增强的理念，我来到另一个解决方案：

  • 将Webfont图标库的样式表嵌入您的脑海中，在本例中为Font Awesome：

  • 从FontAwesome cheatsheet(或任何其他webfont图标)获取代码。
    • 1
    2
    i.e.:
    fa-angle-right [&#xf105;]

    并使用f的最后一部分...后跟一个这样的数字，也使用font-family：

    1
    2
    3
    4
    5
    6
    li:before {
        content:"\f105";
        font-family: FontAwesome;
        color: red; /* or whatever color you prefer */
        margin-right: 4px;
    }

    就是这样！现在你也有自定义项目符号提示=)

    小提琴

    相关讨论

    我只是像这样解决这个问题，它应该适用于所有浏览器：

    HTML：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <ul>

     
    <li>
    <span>Foo</span>
    </li>

     
    <li>
    <span>Bar</span>
    </li>

     
    <li>
    <span>Bat</span>
    </li>


    </ul>

    CSS：

    1
    2
    3
    4
    5
    6
    7
    ul li{
        color: red
    }

    ul li span{
        color: blue;
    }
    相关讨论

    CSS 3 Lists模块的当前规范确实指定了::marker
    伪元素，它会完全符合你的要求; FF已经过测试
    不支持::marker，我怀疑Safari或Opera是否拥有它。
    IE当然不支持它。

    所以现在，唯一的方法是使用带有list-style-image的图像。

    我猜你可以用span包装li的内容，然后你可以设置每个的颜色，但这对我来说似乎有些晦涩难懂。

    相关讨论

    一种方法是使用li:before和content:""并将其设置为inline-block元素。

    这是一个有效的代码片段：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ul {
      list-style-type: none; /* no default bullets */
    }

    ul li {
      font-family: Arial;
      font-size: 18px;
    }

    ul li:before { /* the custom styled bullets */
      background-color: #14CCBB;
      border-radius: 50%;
      content:"";
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 2px;
      height: 10px;
      width: 10px;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <ul>

     
    <li>
    Swollen joints
    </li>

     
    <li>
    Pain in hands and knees
    </li>

     
    <li>
    Redness around joints
    </li>

     
    <li>
    Constant fatigue
    </li>

     
    <li>
    Morning stiffness in joints
    </li>

     
    <li>
    High fevers
    </li>

     
    <li>
    Rheumatoid nodules, which develop around joints
    </li>


    </ul>

    相关讨论

    然而，另一种解决方案是使用:before伪元素和border-radius: 50%。这适用于所有浏览器，包括IE 8及更高版本。

    使用em单元可以响应字体大小的变化。您可以通过调整jsFiddle窗口的大小来测试它。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ul {
        list-style: none;
        line-height: 1em;
        font-size: 3vw;
    }

    ul li:before {
        content:"";
        line-height: 1em;
        width: .5em;
        height: .5em;
        background-color: red;
        float: left;
        margin: .25em .25em 0;
        border-radius: 50%;
    }

    的jsfiddle

    您甚至可以使用box-shadow来创建一些漂亮的阴影，使用content:"?"解决方案看起来不太好看。

    相关讨论

    我试过这个，事情对我来说很奇怪。 (css在本教程的:after {content:"";}部分之后停止工作。我发现你可以通过在li项本身上使用color:#ddd;来为子弹着色。

    这是一个例子。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    li{
        color:#ff0000;    
        list-style:square;                
    }
    a {
        text-decoration: none;
        color:#00ff00;
    }

    a:hover {
        background-color: #ddd;
    }
    相关讨论

    我使用jQuery：

    1
    jQuery('li').wrapInner('<span class="li_content" />');

    ＆与一些CSS：

    1
    2
    li { color: red; }
    li span.li_content { color: black; }

    也许是矫枉过正，但如果您正在为CMS编码而且您不想让您的编辑在每个列表项中添加额外的跨度，那么就会很方便。

    相关讨论

    我建议给出li a background-image和padding-left。 list-style-image属性在跨浏览器环境中很有用，并且添加额外的元素(例如span)是不必要的。所以你的代码最终会看起来像这样：

    1
    2
    3
    4
    5
    li {
      background:url(../images/bullet.png) 0 0 no-repeat;
      list-style:none;
      padding-left:10px;
    }

    您可以做的最简单的事情是将

  • 的内容包装在或等效内容中，然后您可以单独设置颜色。

    或者，您可以使用所需的子弹颜色制作图像，并使用list-style-image属性进行设置。

    相关讨论

    Lea Verou解决方案的变体与多行条目中的完美缩进可能是这样的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ul{
        list-style: none;
        position: relative;
        padding: 0;
        margin: 0;
    }

    li{
        padding-left: 1.5em;
    }

    li:before {
        position: absolute;
        content:"?";
        color: red;
        left: 0;
    }
    相关讨论

    我正在为这个问题添加我的解决方案。

    我不想使用图像和验证器会惩罚你在CSS中使用负值，所以我这样做：

    1
    2
    3
    4
    5
    ul          { list-style:none; padding:0; margin:0; }

    li          { padding-left:0.75em; position:relative; }

    li:before       { content:"?"; color:#e60000; position:absolute; left:0em; }

    我知道这篇文章有点迟到，但供参考......

    CSS

    1
    2
    3
    4
    5
    6
    7
    ul {
        color: red;
    }

    li {
        color: black;
    }

    子弹颜色在ul标签上定义，然后我们将li颜色切换回来。

    相关讨论

    Lea Verous解决方案很好，但我希望更多地控制子弹的位置，所以这是我的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .entry ul {
        list-style: none;
        padding: 0;
        margin: 0;
        /* hide overflow in the case of floating elements around ... */
        overflow: hidden;
    }
    .entry li {
        position: relative;
        padding-left: 24px;
    }
    .entry li:before {
        /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
        position: absolute;
        content:"?";
        color: #E94E24;
        font-size: 30px;
        left: 0;
        /* use fonts like"arial" or use"sans-serif" to make the dot perfect round */
        font-family: Arial, sans-serif;
    }

    以Lea的演示为例，这是一种制作无序列表的不同方式，带有边框：http：//jsfiddle.net/vX4K8/7/

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <ul>

       
    <li>
    Foo
    </li>

       
    <li>
    Bar
    </li>

       
    <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </li>

           
    <ul>

           
    <li>
    Son
    </li>

           
    <li>
    Of
    </li>

               
    <ul>

               
    <li>
    Foo
    </li>

               
    <li>
    Bar
    </li>

               
    <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </li>

               
    </ul>

           
    </ul>


    </ul>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    ul {
    list-style: none;
    margin: 0;
    }

    ul:first-child {
       padding: 0;
    }

    li {
        line-height: 180%;
        border-bottom: 1px dashed #CCC;
        margin-left: 14px;
        text-indent: -14px;
    }

    li:last-child {
        border: none;
    }

    li:before {
        content:"";
        border-left: 4px solid #CCC;
        padding-left: 10px;
    }
    相关讨论

    这样做..

    1
    2
    3
    li{
      color: #fff;
    }
    相关讨论