Question

这是我的HTML代码！

import React, { Component } from 'react';
import { connect } from 'react-redux';
import WheatherLayoutComponent from '../components/WheatherLayout'

const mapStateToProps = state => (console.log('WheatherLayoutComponent ', state), {
   cityStore: state.weather
});

export default connect(
    mapStateToProps, 
    null)(WheatherLayoutComponent);

这里我有我的css代码而且我没有解释为什么不选择前两个图像并让最后一个图像出来，基本上现在怎么样都没有选择

<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>

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

Answer 1

您正在选择图像的容器。假设您想要为图像添加边距，请尝试使用以下代码：

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

这将选择除最后一个之外的所有图像。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您编写的CSS规则定位的是.section-about__imagesDiv类的元素，这些元素不是最后一个子元素，而不是<div/>中的子元素。因为该类只有一个div，所以该div是最后一个子节点，导致你的样式没有效果，即使在错误的元素上也是如此。

您想要定位图像，例如;

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

选择器：不是（：last-child）不使用div子img标签？

2 个答案: