<section class="section-one"></section>
<section class="section-two"></section>
<nav></nav>
<section class="section-three"></section>
<section class="section-four"></section>
Поскольку порядок разделов поступает из CMS, порядок разделов неизвестен (т. Е. section-two и section-three можно поменять местами). Я хочу выбрать первый одноуровневый раздел после section-two, но не могу использовать соседние одноуровневые селекторы, так как между разделами потенциально есть другие элементы.
Как я могу выбрать первый раздел после section-two, учитывая, что между ними может быть один или несколько элементов?
4 ответа
.section-two ~ section {
/* Set styles */
}
.section-two ~ section ~ section {
/* Undo styles */
}
.section-two ~ section {
background: #0f0;
}
.section-two ~ section ~ section {
background: transparent;
}<section class="section-one">One</section>
<section class="section-two">Two</section>
<nav>Nav</nav>
<section class="section-three">Three</section>
<section class="section-four">Four</section>Вы можете использовать [class^="section-"], поэтому выберите любой класс, который начинается с ".section-", а я использовал nth-last-of-type(2), чтобы отсчитать 2 от конца и выбрать правильный элемент, но без nth-last-of-type(2) вы получите все .section-NUMBER после .section-два
section {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background-color: gray;
}
nav {
display: inline-block;
width: 100%;
height: 10px;
background-color: gray;
}
.section-two ~ [class^="section-"]:nth-last-of-type(2) {
background-color: blue;
}<section class="section-one"></section>
<section class="section-two"></section>
<nav></nav>
<section class="section-three"></section>
<section class="section-four"></section>Я не знаю, можно ли добиться этого только с помощью css-селекторов, они немного ограничены с точки зрения обхода dom.
В качестве примера вы можете использовать обход jQuery, чтобы:
$('.section-two').nextAll('section').first()
Будет выбран первый раздел после .section-two, отметьте это
Надеюсь, это поможет. Ура!
РЕДАКТИРОВАТЬ: Хорошо, похоже, вы можете выбрать удаленного брата, установив стиль, а затем отменив его, как предлагает @Oriol. Я сохраню этот ответ в качестве справки о том, как решить эту проблему с помощью jquery, для использования в будущем.
$('.section-two').nextAll('section').first().css('color', 'red')<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-one">1</section>
<section class="section-two">2</section>
<nav></nav>
<section class="section-three">3</section>
<section class="section-four">4</section>Если вы используете jquery $ (".section-two ~ section") .css (/ * делать что угодно * /);
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.