Question

我正在尝试更改下拉菜单ul部分中用于电话号码的链接的颜色。尝试了大量不同的选择器，但没有任何工作！我正在使用bootstrap 3.任何人和想法？我使用选择器.dropdown-menu li a来改变字体大小，但字体的颜色不会改变。任何帮助都会很棒

            <div id="desktop" class="navbar-brand">
               <a class="numbers" href="tel:018151515">018 15 15 15</a> 
            </div>
            <div id="call">
                 <ul class="nav navbar-nav navbar-right">

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
                        <span class="glyphicon glyphicon-earphone" id="earphone">`enter code here`</span>
                        <b class="caret" ></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li>
                            <a class="numbers" href="tel:018151515">018 15 15 15</a>
                        </li>
                        <li class="divider">
                            <a  href="tel:018151515"></a>
                        </li>
                        <li class="header">
                            <a class="numbers" href="tel:018151515">Mobile Numbers</a>
                        </li>
                        <li class="divider">
                            <a  href="tel:018151515"></a>
                        </li>
                        <li>
                            <a class="numbers" href="tel:018151515">085 111 1111</a>
                        </li>
                        <li>
                            <a class="numbers" href="tel:018151515">086 222 2222</a>
                        </li>
                        <li>
                            <a class="numbers" href="tel:018151515">087 333 3333</a>
                        </li>

                    </ul>
                </li>
            </ul>    
            </div>

Answer 1

看看这个DEMO

li a.numbers {
    color: red;
}

Answer 2

使用此CSS：

a[href*="tel:"] { color: red; }

它将使用tel：

进行href的所有锚点的文本颜色为红色

Answer 3

当没有应用有效样式时，我发现了两个常见原因：

您的选择器未能指定正确的内容，或
选择器很好，但更具“特定”的东西会覆盖您尝试应用的样式。

在你的情况下，由于正在应用font-size，我猜2而不是1.所以当你用.dropdown-menu li正确选择时，你可以设置font-size并且它适用于li标签内的文本以及链接文本。但是，当您将颜色应用于li标记时，它会被a标记上的颜色设置覆盖，因为a标记更具体。

特异性是决定将什么CSS应用于网页的哪个部分的规则。有很多关于它的好文章，包括这一篇：http://css-tricks.com/specifics-on-css-specificity/

如果是导致问题的a标记，则需要一个比a标记更具体的选择器。 ul.dropdown-menu > li > a.number应该有效，如果不够具体，您可以使用href匹配a ul.dropdown-menu > li > a[href^="tel"].numbers部分。这比*=匹配在href中的任何地方找到“tel”更有效。

如果我能看到你的CSS，我就能确认我的猜测和解决方案。也许下次尝试jsfiddle？

css选择器需要更改下拉列表中的文本颜色

3 个答案: