CSS 仅针对 class "row" 的第一级而不是嵌套的

Question

是否可以只定位 class .row 的第一层？

<h2>{{ 'PERSONALDETAILS'|trans }} {# (<a href='#' onclick="">{{ 'PRIVACY'|trans }}</a>) #}</h2>
<span class="tiny-text">* {{ 'DENOTESREQUIRED'|trans }}</span>

<div class="row">

    <div class="large-4 columns">
        <input class="" name="firstName" tabindex="19" type="text" value="{{ data.user.firstName }}" placeholder="{{ 'FIRSTNAME'|trans }} *" autocomplete="off" required/>
    </div>

    <div class="large-4 columns">
        <input class="" name="lastName" tabindex="20" type="text" value="{{ data.user.lastName }}" placeholder="{{ 'LASTNAME'|trans }} *" autocomplete="off" required/>
    </div>

    <div class="large-4 columns">
        <input class="" name="emailAddress" tabindex="21" type="email" value="{{ data.user.email }}" placeholder="{{ 'EMAIL'|trans }} *" autocomplete="off" id="email" required/>
    </div>

</div>

<div class="row">

    <div class="large-4 columns">
        <input class="email" name="confirmEmail" tabindex="22" type="email" value="" placeholder="{{ 'CONFIRMEMAIL'|trans }} *" autocomplete="off" data-equalto="email" required/>
    </div>

    <div class="large-4 columns select-nationality">
        <select class="sel-box" required tabindex="23" id="nationality" name="nationality" data-highlight-code="2034, 2037">
            {% if data.user.nationality.name is not defined %}
                <option value="" selected="selected">{{ 'SELECTNATIONALITY'|trans }} *</option>
            {% endif %}
            {% for nationality in data.nationalities %}
                {% if data.user.nationality.name == nationality.name %}
                    <option value="{{ nationality.name }}" selected="selected">{{ data.user.nationality.name }}</option>
                {% else %}
                    <option value="{{ nationality.name }}">{{ nationality.name }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </div>

    <div class="large-4 columns select-arrival-time">
        <select class="sel-box" required tabindex="24" id="arrivalTime" name="arrivalTime" data-highlight-code="2063, 2025">
            <option value="" selected="selected">{{ 'ARRIVALTIME'|trans }} *</option>
            {% for time in data.property.checkIn.startsAt .. data.property.checkIn.endsAt %}
                <option value="{{ time }}">{{ time }}:00</option>
            {% endfor %}
        </select>
    </div>

</div>

<div class="row">

    <div class="large-4 columns telephone">
        <input class="digits" name="phoneNumber" tabindex="25" type="text" value="" placeholder="{{ 'TELEPHONENUMBER'|trans }}"autocomplete="off" />
    </div>

    <div class="large-4 columns select-gender">
        <select class="sel-box" required tabindex="26" id="gender" name="gender" data-highlight-code="2023">
            <option value="" selected="selected">{{ 'SELECTGENDER'|trans }} *</option>
            {% for gender in data.genderList %}
                {% if gender.value == data.user.gender.id %}
                    <option value="{{ gender.value }}" selected="selected">{{ gender.label }}</option>
                {% else %}
                    <option value="{{ gender.value }}">{{ gender.label }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </div>

    <div class="large-4 columns male-female-wrapper">
        {% if data.reservation.property.ymca %}
            <div class="row">
                <div class="large-4 columns selection">
                    <p>{{ 'NOOFPEOPLE'|trans }}:</p>
                </div>
                <div class="small-8 columns male-female-select">
                    <div class="row">
                        <div class="small-6 columns male-select">
                            <label>{{ 'MALE'|trans }}</label>
                            <select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
                                {% for i in 0..data.numberOfGuests %}
                                    <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="small-6 columns female-select">
                            <label>{{ 'FEMALE'|trans }}</label>
                            <select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
                                {% for i in 0..data.numberOfGuests %}
                                    <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
            </div>
        {% endif %}
    </div>

最后一个块有嵌套行：

    <div class="large-4 columns male-female-wrapper">
        {% if data.reservation.property.ymca %}
            <div class="row">
                <div class="large-4 columns selection">
                    <p>{{ 'NOOFPEOPLE'|trans }}:</p>
                </div>
                <div class="small-8 columns male-female-select">
                    <div class="row">
                        <div class="small-6 columns male-select">
                            <label>{{ 'MALE'|trans }}</label>
                            <select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
                                {% for i in 0..data.numberOfGuests %}
                                    <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="small-6 columns female-select">
                            <label>{{ 'FEMALE'|trans }}</label>
                            <select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
                                {% for i in 0..data.numberOfGuests %}
                                    <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
            </div>
        {% endif %}
    </div>

我只需要定位 class“.row”的第一层

我试过了，但没用：

.personal-details > .row{
    .columns:first-child{
        padding-left:0;
    }
    .columns:last-child{
        padding-right: 0;
    }
}

Answer 1

您的代码编译为以下两个选择器：

.personal-details > .row .columns:first-child
.personal-details > .row .columns:last-child

您正确地定位了 .row 元素的第一级，但是因为嵌套的 .columns 元素是它们自己的 .row 父元素和一级 .row 父级，它们也匹配。

因此您需要添加更多 > 组合器：

.personal-details > .row{
    > .columns:first-child{
        padding-left:0;
    }
    > .columns:last-child{
        padding-right: 0;
    }
}

这将生成以下选择器，这些选择器将仅匹配顶级 .columns 元素：

.personal-details > .row > .columns:first-child
.personal-details > .row > .columns:last-child

CSS 仅针对 class "row" 的第一级而不是嵌套的

CSS target first level of class "row" only and not nested ones

css

css-selectors

sass