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;
            }

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

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

谢谢。

Answer 1

有多种方法可以做到这一点...

1. 给子弹上色的想法

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

   jsfiddle

2. 另一个链接

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

Answer 2

请在 CSS 内容下方添加额外内容

a:link {color:#FF0000;} 
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}  
a:active {color:#0000FF;}

这是小提琴

Answer 3

试试这个http://jsfiddle.net/Dnxmm/。[ul] 必须在前面。

ul.mobile-menu-links{
            margin:0;
            padding-left:3%;
            color:red;
        }

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