Смежный селектор CSS не работает

Считайте, что у меня есть этот DOM,

<div id = "banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

Я хочу выбрать p из button, почему ниже css не работает?

#banner-message {
  button {
    & + p {
      color: red;
    }
  }
}

html css sass

03.04.2018 10:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

114

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Удалите &. Кстати, в вашем SCSS вы выбираете button + p, но в вашей разметке это p + button. См. здесь для демонстрации

ты не меняешь мой ДОМ, лол

— 03.04.2018 10:32

ой, моя плохая. как другие, возможно, подчеркнули, на данный момент нет возможности вернуться назад.

— 03.04.2018 10:41

03.04.2018 10:25

Ответ принят как подходящий

Приведенный код не работает, поскольку вы просматриваете предыдущих братьев и сестер. Селекторы CSS работают для следующих братьев и сестер. Селектора предыдущего брата нет. Вы можете обратиться к принятому ответу для Есть ли селектор CSS «предыдущего брата»? для получения дополнительной информации. В противном случае вам придется изменить разметку, как указано @Andy Aldo.

03.04.2018 10:29

Селектором + вы выбираете <p> ПОСЛЕ кнопки ... Смотрите это: https://jsfiddle.net/8y2mstbo/2/

03.04.2018 10:31

Это невозможно с помощью css для выбора предыдущего элемента. так что вы должны попробовать сценарий для этого или вы должны изменить структуру.

03.04.2018 10:34