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

大多数直截了当的方法是使用CSS3的:first-of-type：

#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

Check this working code on Fiddle

Answer 3

:first-child不匹配，因为#feature :first-child将是h2元素（并且它不是p标记）。 :first-child是父母的第一个孩子。你想要来自CSS3的:first-of-type。但它不适用于IE＆lt; 9.其他现代浏览器应该可以工作：http://kimblim.dk/css-tests/selectors/

css相当于first：child首先使用heading和img在div中定位<p>？</p>

3 个答案: