css эквивалент первого: дочерний элемент для первого <p>в div с заголовком и img предшествующим?

Question

Я хочу, чтобы первый абзац в div был больше текста, чем все последующие абзацы, однако этот абзац не является первым потомком div. Как написано в w3schools, я думал, что следующий синтаксис сработает, но это не так:

#feature > p:first-child {
    font-size: 22px;
}


#feature p {
    font-size: 16px;
}


<div id="feature">
    <h2>Feature Name</h2>
    <img class="featureimg" src="images/whatever.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nam mattis accumsan consequat. Vivamus eu ligula magna. Cras ultrices nisl et justo convallis nec volutpat purus facilisis.Vestibulum eget augue justo, </p>
</div>

Очевидно, я могу поместить элементы p в их собственный div, но это похоже на divitis, и я хотел бы знать, есть ли более простой способ сделать это!

http://jsfiddle.net/35yYJ/

Answer 1

Простой самый простой способ сделать это - использовать :first-of-type CSS3 *:

#feature > p:first-of-type {
    font-size: 22px;
}

Но поддержка браузера для него плохая, поэтому в вашем случае вы можете попробовать использовать этоСелектор только для CSS2, при условии, что за первым p всегда следуют h2 и img (из заголовка вашего вопроса):

#feature > h2:first-child + img + p {
    font-size: 22px;
}

Answer 2

Вы можете нацелить элемент выше p, затем использовать соседний селектор "+", чтобы выбрать p.
, поэтому в вашем случае будет:

#feature img + p {
    font-size: 22px;
}

, и он поддерживает IE7

Проверьте этот рабочий код на Fiddle

Answer 3

:first-child не совпадает, потому что #feature :first-child будет элементом h2 (и это не тег p).:first-child - первый дочерний элемент родителя.Вы хотите : первый тип из CSS3.Но это не будет работать на IE <9. Другие современные браузеры должны работать, хотя: <a href="http://kimblim.dk/css-tests/selectors/" rel="nofollow">http://kimblim.dk/css-tests/selectors/