html - 无法设置列表中元素符号颜色的样式

Question

我正在尝试更改列表点的颜色，但它不起作用？

<div class="mobile-menu" id="mobile-menu">
        <div id="mobile-menu-links">
            <h4>General:</h4>
            <ul class="mobile-menu-links">
                <li><a href="">News</a></li>
                <li><a href="">The boring rules!</a></li>
                <li><a href="">The rankings</a></li>
            </ul>

.mobile-menu #mobile-menu-links ul{
                list-style-type: none;
                margin:0;
                padding-left:3%;
            }

            .mobile-menu #mobile-menu-links ul li{
                padding-bottom:2px;
                border-bottom:1px solid #bababa;
            }

如果我在两个 CSS 声明中的任何一个中添加 color:red，它都不会改变颜色。

请注意，我的文档中的 HTML 已关闭，我只是复制了第一部分供您查看。

谢谢。

Answer 1

有多种方法可以做到...

1. 子弹着色背后的想法

   ul { list-style: none; }
   
   li:before { content:"\2022 \00A0"; color: red; }
   

   jsfiddle

2. another link

根据评论，我可以看到颜色变化 jsfiddle