выбрать только первый ребенок в css при наведении

0

так вот мой код:

ul.primary li:hover > a{
    transform:translate(7px,7px);
    -ms-transform:translate(7px,7px);
    -webkit-transform:translate(7px,7px);
}

Я хочу выбрать только первый тег "a". Его для меню, и я не хочу, чтобы ссылки в следующем "ul li a" были переведены на 7 пикселей вниз и вправо. По какой-то причине, когда я пытаюсь изменить css подменю, выполните следующие действия:

ul.sub li a:hover {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

переход все еще существует.

здесь находится html меню:

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary">
    <li>
      <a href="">WORKS</a>
      <ul class="sub">
        <li><a href="">CERAMICS</a></li>
        <li><a href="">EXHIBITIONS</a></li>
        <li><a href="">OTHERWORKS</a></li>
      </ul>
    </li>
    <li>
      <a href="">PHOTOS</a>
    </li>
    <li>
      <a href="">OTHER PROJECTS</a>
      <ul class="sub">
        <li><a href="">INSTAGRAM FEED</a></li>
        <li><a href="">PUBLICATIONS</a></li>
        <li><a href="">WARDOBE DESIGN</a></li>
      </ul>  
    </li>
  </ul>
</nav>
</div>
  • 0
    попробуйте использовать :first-child .
  • 0
    покажите HTML [искусство вашего кода, пожалуйста ul.primary li: hover> a: first-child
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

решена проблема mmy:

ul.primary > li:hover > a

был правильным селектором.

Поделиться
  • 0
    Для справки, первый ребенок относится к первому прямому потомку / потомку родителя в DOM, вы, похоже, имеете в виду прямых потомков / детей, которые (хотя и включают первого ребенка) не одно и то же. Обеспечение ясности в терминологии поможет сообществу дать лучшие, более подходящие ответы в будущем.
  • 0
    На мой взгляд, ваш ответ должен выбрать ВСЕ ссылки под li которые являются дочерними по отношению к ul.primary . Поправь меня, если я ошибаюсь. Это не первый дочерний селектор, он применяется ко всем ссылкам.
0

Вам нужен ul.primary li:first-child:hover > a и

ul.sub li:hover a {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}
Поделиться
  • 0
    Я попробовал это также, и это не работает. это просто выбирает первый «a» тег в верхнем ярусе меню, и ничто другое не работает так, как должно.
  • 0
    Может быть, ваша структура HTML отличается от того, что я думал. Попробуйте ul.primary li:hover > a:first-child

Ещё вопросы

Сообщество Overcoder
Наверх
Меню