CSS仅针对第一级类“行”而不是嵌套类答案

【问题标题】：CSS target first level of class "row" only and not nested onesCSS仅针对第一级类“行”而不是嵌套类
【发布时间】：2015-02-03 00:53:11
【问题描述】：

是否可以只针对 .row 类的第一级？

http://jsfiddle.net/czdagd3k/2/

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

我只需要定位“.row”类的第一级

我试过了，但是不行：

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

【问题讨论】：

请用你正在使用的预处理器标记你的问题，否则有人会骂你嵌套规则是无效的 CSS。
老实说，我宁愿不将纯 CSS 问题标记为 Sass。只需发布编译后的 CSS。

标签： css css-selectors sass

【解决方案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

【讨论】：