Question

我有以下LESS代码：

.modal-input-row {
        padding-bottom: 1rem;
        padding-top: 1rem;
        overflow: hidden;
        display: block;

        div {
            float: left;
            width: 50%;

            input {
                box-sizing: border-box;
                margin-bottom: 0.1rem;
                width: 75%;
            }

        }
    }

如何才能使外部容器内的第一个模态输入行在顶部没有填充？

Answer 1

使用:first-child伪选择器：

input {
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    width: 75%;
    &:first-child {
        padding-top: 0;
    }
}

但是，如果您希望第一个input中的.modal-input-row没有顶部填充：

.modal-input-row {
    padding-bottom: 1rem;
    padding-top: 1rem;
    overflow: hidden;
    display: block;

    div {
        float: left;
        width: 50%;

        input {
            box-sizing: border-box;
            margin-bottom: 0.1rem;
            width: 75%;
        }

    }
    &:first-child input {
        padding-top: 0;
    }
}

Answer 2

使用:first-child伪类

.outercontainer .modal-input-row {
    padding-bottom: 1rem;
    padding-top: 1rem;
    overflow: hidden;
    display: block;

    &:first-child {
       padding-top: 0;
    }

    ...

}

我怎样才能使DIV中的第一个元素与其他元素具有不同的CSS？

2 个答案: