css selector необходимо изменить цвет текста в раскрывающемся списке

Question

Я пытаюсь изменить цвет ссылок, используемых для телефонных номеров, в выпадающем меню ul part. Попробовали тонны разных селекторов, но ничего не работает! Я использую 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; } 

Это цвет текста красный всех якорей, которые имеет href с tel:

Answer 3

Когда действительный стиль не применяется, я нашел две общие причины:

1. Ваш селектор не в состоянии указать правильную вещь, или
2. Селектор это хорошо, но что-то более " специфический "отменяет стиль, который вы пытаетесь применить.

В вашем случае, поскольку размер шрифта прикладывается, я предполагаю, 2, а не 1. Поэтому, когда вы правильно выбрать с .dropdown-menu li вы можете установить размер шрифта и это относится к текст в теге 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. Это немного более эффективно, чем совпадение *= найдет «tel» в любом месте href.

Если бы я мог видеть ваш CSS, я был бы в состоянии подтвердить свое предположение и решение. Может быть, попробуйте jsfiddle в следующий раз?