选择器 :not(:last-child) 不能使用 div 子 img 标签？

Question

这是我的 html 代码！

<main>
        <section class="section-about">
            <div class="section-about__imagesDiv"> 
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
            </div>
        </section>
    </main>

这里有我的 css 代码，我不明白为什么不选择前两张图片而放最后一张，基本上现在什么都不选是怎么回事

.section-about__imagesDiv:not(:last-child) {

margin-top: 100rem;}

提前致谢！我花了两个小时到现在还没有结果

Answer 1

您编写的 CSS 规则针对具有 class .section-about__imagesDiv 的元素，这些元素不是最后一个 child，而不是其中的 children <div/>。因为 class 只有一个 div，因此 div 是最后一个 child，导致您的样式无效，即使在错误的元素上也是如此。

例如，您想要定位图像；

.section-about__imagesDiv > .test:not(:last-child) {
    margin-top: 100rem;
}

Answer 2

您正在 select 图片的容器。假设您想给图像留出边距，请尝试使用以下代码：

.section-about__imagesDiv img{ margin-top: 100rem; }

这将 select 除最后一张图像之外的所有图像。

.section-about__imagesDiv img:not(:last-child) { margin-top: 100rem;}

<main>
        <section class="section-about">
            <div class="section-about__imagesDiv"> 
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
                <img src="http://static.messynessychic.com/wp-content/uploads/2015/07/spitfire1.jpg" alt="#" class="test ">
            </div>
        </section>
    </main>

选择器 :not(:last-child) 不能使用 div 子 img 标签？

Selector :not(:last-child) not working with div child img tag?

html

css

image

selector