CSS选择器需要更改下拉菜单中文本的颜色

Question

I am trying to change the color of the links used for the phone numbers in the dropdown- menu ul part. Have tried tons of different selectors but nothing is working! I'm using bootstrap 3. Anybody and ideas?i chnaged the font size using the selector .dropdown-menu li a but the color of the font would not change. Any help would be great

            <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

Take a look at this DEMO

li a.numbers {
    color: red;
}

Answer 2

Use This CSS:

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

It will text color red of all anchors who has href with tel:

Answer 3

When a valid style isn't being applied, I've found two common causes:

1. Your selector is failing to specify the right thing, or
2. The selector is fine, but something more 'specific' is overriding the style you're attempting to apply.

In your case, since the font-size is being applied, I'm guessing 2 rather than 1. So when you correctly select with .dropdown-menu li you're able to set the font-size and it applies to the text within the li tag and down to the link text as well. However, when you apply the color to the li tag, it is overridden by a color setting on the a tag because the a tag is more specific.

Specificity are the rules which determine what CSS is applied to what part of a web page. There are many good articles about it, including this one: http://css-tricks.com/specifics-on-css-specificity/

If it is the a tag which is causing the problem, you need a selector that will be more specific than the a tag. ul.dropdown-menu > li > a.number should work, and if it isn't specific enough, you can match against the href part of the a with something like: ul.dropdown-menu > li > a[href^="tel"].numbers . This is slightly more efficient than the *= matching will will find "tel" anywhere in the href.

If I could see your CSS I'd be able to confirm my guess and solution. Maybe try a jsfiddle next time?