#html #css
#HTML #css
Вопрос:
У меня есть следующий HTML:
<nav class="SecondaryNav sideMenu">
<ul class="Nav_TopUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
<span class="Nav_Span"></span>
<span class="Nav_SubMenuIndicator"></span>
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</nav>
То, что я пытаюсь выбрать, это UL с классом «Nav_SubUL», но только там, где он является родственным элементом ‘a’ с классом «Nav_A», который имеет изображение и диапазон с классом «.Nav_Span»
Это полный рот, я надеюсь, что это имеет смысл!
Вот что я пробовал до сих пор, но не имел большой удачи. CSS не является моей сильной стороной, так что, возможно, у этого действительно очевидный ответ, но я ни за что на свете не смогу его получить.
.SecondaryNav.sideMenu .Nav_A > .Nav_Img .Nav_Span .Nav_SubMenuIndicator ~ .Nav_SubUL {
margin-top: 265px;
}
.SecondaryNav.sideMenu .Nav_A > .Nav_Img .Nav_Span ~ .Nav_SubUL {
margin-top: 265px;
}
Заранее всем спасибо
Комментарии:
1. Здесь я вижу только один экземпляр
Nav_SubUL. Есть ли у вас в коде другие элементы, которые вы просто не включили?2. В любом случае, то, что вы пытаетесь сделать, сложно, вам понадобятся селекторы «предыдущий сиблинг» и «родительский» селектор, ни один из которых, к сожалению, не существует. Вам нужно будет изменить свою разметку или способ применения классов, или вам нужно будет использовать JavaScript, чтобы определить, когда применять определенные классы с теми стилями, которые вы хотите, чтобы они имели.
3. да, извините, я опустил всю навигационную структуру, поэтому не стал заполнять экран html. Nav_Li повторяется x раз при наличии навигационных ссылок, A будет содержать изображение только иногда, и именно в тех случаях, когда это делает is, мне нужно отрегулировать поля Nav_SubUL. Я надеюсь, что это помогает и имеет смысл. 🙂
4. Самым простым решением было бы поместить пользовательский класс like
Nav_Imgв элементы сNav_LI, которые, как вы знаете, будут иметь изображение. Тогда вы можете сделать.Nav_Li.Nav_Img .Nav_SubUL {}или что-то в этом роде, в противном случае вам понадобится JS, как я упоминал (или полный редизайн HTML).5. Если вы готовы согласиться с тем, что JS является ответом, я могу предоставить повторяющиеся целевые объекты для ссылки на вопрос, который решит вашу проблему.
Ответ №1:
В конце я разобрался с этим, применив некоторые дополнительные классы к родительскому элементу nav. Как всегда, спасибо всем за вашу помощь и предложения. Иногда все, что вам нужно, — это полезное сообщество, которое подтолкнет вас к нужному результату. Еще раз спасибо. Удачного кодирования!
Ответ №2:
Я думаю, вы можете использовать что-то вроде
a.Nav_a ~ ul.Nav_SubUL {
color: pink;
}
Комментарии:
1. Это не удовлетворяет требованию
aэлемента, который должен содержать изображение, за которым следует интервал с определенным именем класса.2. Верно! Я неправильно понял вопрос
Ответ №3:
Вы можете использовать
a.Nav_a ~ ul.Nav_SubUL {
}
как упоминал dantefff, но вы не можете проверить наличие дочерних элементов .Nav_a только с помощью css — вам придется использовать javascript.
Или сделайте что-нибудь другое с вашими divs и их классами.