CSS3 атрибут селектора + класс

-1

Я не понимаю, потому что если у меня есть это правило CSS:CSS3 атрибут селектора + класс

.glyphicon-star { 
    font-size: 55px; 
    color: #FF7F02; 
} 

span.glyphicon.glyphicon-star { 
    font-size: 30px; 
    color: gray; 

}

и у меня есть промежуток с классом .glyphicon.glyphicon-звездой ... мое правило будет применяться не только в этом элементе span, но везде на моей странице.

<body> 
     <div> 
      <div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <h2>Newest</h2> 


    <article> 
    <div id="crud1" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       ChartLine 1 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="crud1" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       ChartLine 2 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="crud1" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       Chart 3 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="c3-1" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       ChartLine C3 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       <img src="/assets/img/pen_tomato.png"> 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: Chart with round for prisma 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="c3-3" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       ChartLine C3 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: Chart without axes 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="c3-2" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       ChartLine C3 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: Chart with Date for prisma 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



    <article> 
    <div id="chr3" class="panel panel-primary" > 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       Stacked Area Chart 
      </h3> 
      <p> 

      </p> 
     </div><!-- panel-heading closed --> 
     <div class="panel-body"> 
      <div class="container-fluid"> 
       No-picture 
      </div> 
     </div><!-- panel-body closed --> 
     <div class="panel-footer clearfix"> 

      <div class="col-md-8"> 
      Description: 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-star"></span> 

      </div> 

     </div><!-- panel-footer closed --> 


    </div><!-- panel closed --> 

</article> 



     </div> 
     <div class="col-md-4"> 
      <h2>Recently Updated</h2> 
     </div> 
     <div class="col-md-4"> 
      <h2>Ordered</h2> 
     </div> 
    </div> 
</div> 
     </div> 
    </body> 
</html>

Но если я удалю правило, и я добавлю правило непосредственно в строку кода, я смогу достичь своей цели. (очевидно, мне нужно удалить общее правило css)

<div class="col-md-2"> 
        <span class="glyphicon glyphicon-star" style="color:gray;"> 
       </div>

источник

2015-07-10 Silvio S.

Возможно, потому, что вы забыли закрыть элемент span – fcalderan

Нет, я попробовал, но результат полностью такой же –

@SilvioS. убедитесь, что ваша страница не кэширована. Я не могу повторить эту проблему после добавления в тег закрытия 'span' с кодом, который вы указали. –

Не видя всей вашей страницы, трудно дать вам точный ответ. Может быть, где-то в DOM Tree есть элемент, который имеет те же классы?

ум несколько других вещей Aswell:

Ваш <span> тег не закрыт ... может повлиять на остальную часть вашей страницы.

Встраиваемые стили (например, style="color: gray") всегда будут отменять все остальные стили в таблице стилей (если вы не используете уродливое правило !important).

Применение стиля к span.glyphicon.glyphicon-star повлияет на диапазон, который имеет как класс glyphicon, так и класс .glyphicon-star.
Использование span.glyphicon .glyphicon-star (с пробелами) повлияет на дочерний элемент с классом .glyphicon-star thta находится внутри <span> с классом .glyhpicon.

источник

2015-07-10 09:12:43 LinkinTED

Это была моя ошибка, я использовал тот же класс в другом фрагменте своего кода! благодаря –

CSS3 атрибут селектора + класс

ответ

Смежные вопросы