css - 使用 CSS3 nth-child 在 DIV 标签中交替 float 图像

Question

基本上，我要创建的是一个 div 标签页面，每个标签中都有一个图像，我正在尝试使用 CSS3 的第 nth-child 来交替显示该特定图像的 float 。但是对于我来说，我无法让第 n 个 child 找到这些图像。到目前为止，这是我的代码...

CSS

.featureBlock img:nth-of-type(even) {
    float: left;
}

.featureBlock img:nth-of-type(odd) {
    float: right;
}

这是其中一个 div 标签的 HTML....

    <div class="featureBlock">

        <h1>Multisize Players</h1>

        <div class="featureHelpBlock"><a href="#">More help with this</a></div>

        <img src="http://office2.vzaar.com/images/features/ft_multisize_players.png">

        <span class="featureContent">
            <p>A variety of player sizes is important as we recognise the fact that no two videos or websites are ever the same and you will want something that suits your site&#8217;s look. So if you record your video in 4x3 (not widescreen) or 16x9 (widescreen) we have the range of player sizes to suit your exact needs.</p>

            <p>We encode the video at the time of uploading in the size that you choose so that the picture and sound quality is retained throughout. Users can choose from the following sizes:</p>
        </span> 
        <br style="clear:both"> 

    </div>

希望这是有道理的。

Answer 1

假设您在同一个父元素中有多个具有 featureBlock 类的元素，您会想要改为这样做:

.featureBlock:nth-of-type(even) img {
    float: left;
}

.featureBlock:nth-of-type(odd) img {
    float: right;
}

在 jsFiddle 上查看它的实际效果:http://jsfiddle.net/PZWd6/

SitePoint CSS 引用对 nth-of-type 说:

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements of the same type.

您可以在 sitepoint 引用页面上阅读更多相关信息: http://reference.sitepoint.com/css/pseudoclass-nthoftype