it-swarm.com.ru

Выберите первый встречающийся элемент после другого элемента

У меня есть следующий HTML-код на странице:

<h4>Some text</h4>
<p>
Some more text!
</p>

В моем .css у меня есть следующий селектор для стиля элемента h4. Приведенный выше HTML-код является лишь небольшой частью всего кода; есть еще несколько divs, принадлежащих теневому боксу:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

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

Возможно ли это с помощью CSS-селекторов? И если да, как я могу это сделать?

94
Rob
#many .more.selectors h4 + p { ... }

Это называется соседний селектор брата .

178
Phrogz

Для вашего буквального примера вы хотите использовать соседний селектор (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

Однако, если вы хотите выбрать все последующие абзацы, вам нужно использовать общий селектор брата (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

Известно, что в IE 7+, к сожалению, есть ошибки .

26
Joel Mellon

Просто ударь это, когда пытаешься решить этот тип вещей сам.

Я сделал селектор, который имеет дело с элементом после того, как что-то отличное от p.

.here .is.the #selector h4 + * {...}

Надеюсь, это поможет любому, кто найдет его :)

14
Tom