0

Есть такое простое меню, рубрика а сверху иконка из спрайта. Все работает, но стиль применяется ко всем тегам "i" на сайте.

Как сделать стиль только для тегов "i" в меню?

i {
  background: url(/sprite.png) 0px 0px no-repeat;
  position: absolute;
  top: 11px;
  left: 27px;
  width: 26px;
  height: 26px;
  display: block;
  z-index: 1;
  cursor: pointer;
  margin-top:6px;
  outline: none;
}



.kamaz {
 background-position: -3px -7px;;
}

.marsh {
  background-position: -223px -7px;
}
<div class="primary nav-menu">
   <ul id="menu" class="primary nav-menu">
     <li class="menu-item">
       <a href="/">
         <i class="kamaz"></i>Камаз</a></li>
     <li class="menu-item">
       <a href="/">
         <i class="marsh"></i>Марш</a></li>
    </ul>
</div>	
     

1 ответ 1

0

используйте более точный селектор

.nav-menu i {
  background: url(/sprite.png) 0px 0px no-repeat;
  position: absolute;
  top: 11px;
  left: 27px;
  width: 26px;
  height: 26px;
  display: block;
  z-index: 1;
  cursor: pointer;
  margin-top:6px;
  outline: none;
}



.kamaz {
 background-position: -3px -7px;;
}

.marsh {
  background-position: -223px -7px;
}
<div class="primary nav-menu">
   <ul id="menu" class="primary nav-menu">
     <li class="menu-item">
       <a href="/">
         <i class="kamaz"></i>Камаз</a></li>
     <li class="menu-item">
       <a href="/">
         <i class="marsh"></i>Марш</a></li>
    </ul>
</div>	
     

2
  • Спасибо. Если использовать .nav-menu он почему-то подставляет для всех рубрик значок .kamaz. Использовал ul как точный селектор, вроде работает. 2 ноя 2018 в 16:15
  • 1
    дело в том, что селектор .kamaz не может перебить селектор .nav-menu i. Селектор класса имеет больший вес, чем селектор тега. Поэтому при изменении .nav-menu i на ul i (два селектора тега), получилось вы ослабили вес этого селектора. Я бы рекомендовал усилить селектор иконки, а не ослаблять селектор пункта меню. Например: .nav-menu i и .nav-menu .kamaz. И почитайте про каскадность в CSS 2 ноя 2018 в 16:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.