CSS 第 n 个类型选择所有图像

Question

我正在尝试让所有奇数图像向左浮动，所有 eben 图像向右浮动。

    <section id="about">
        <div class="content">
            <div class="about-item">
                <img src="img/about1.png" alt="About">
                <h2>About Us</h2>
                <p>Suspendisse efficitur consequat condimentum.</p>
            </div>
            <div class="about-item">
                <img src="img/about2.jpg" alt="Apporach">
                <h2>Professional Approach</h2>
                <p>Curabitur justo turpis, pellentesque rhoncus dignissim non, consequat eget ante.</p>
            </div>
        </div>
    </section>

为了做到这一点，我的逻辑是父级为#about 的每个偶数图像都应该向右浮动，等等。就像这样：

#about img:nth-of-type(2n+1){
  float:left;
}

#about img:nth-of-type(2n){
  float:right;
}

似乎所有图像都漂浮在屏幕左侧，我不明白。我该如何解决？

Answer 1

在这种情况下，您的选择器需要是 .about-item:nth-of-type(2n+1) img 和 .about-item:nth-of-type(2n) img。

nth-of-type 总是并且只计算它的“n”因子在它自己的父元素中，而不是整个文档。

.about-item:nth-of-type(2n+1) img{
  float:left;
}

.about-item:nth-of-type(2n) img{
  float:right;
}

    <section id="about">
        <div class="content">
            <div class="about-item">
                <img src="img/about1.png" alt="About">
                <h2>About Us</h2>
                <p>Suspendisse efficitur consequat condimentum.</p>
            </div>
            <div class="about-item">
                <img src="img/about2.jpg" alt="Apporach">
                <h2>Professional Approach</h2>
                <p>Curabitur justo turpis, pellentesque rhoncus dignissim non, consequat eget ante.</p>
            </div>
        </div>
    </section>

CSS 第 n 个类型选择所有图像

CSS nth of type choosing all images

css

css-selectors