用:nth-​​child选择一个嵌套元素 [英] Selecting a nested element with :nth-child

问题描述

我在使用:nth-child()选择器定位嵌套元素时遇到问题.如何定位第二个和第三个.service?

I'm having problems targeting nested elements with the :nth-child() selector. How can I target the second and third .service?

.service:nth-child(2) { /* styles */ }
.service:nth-child(3) { /* styles */ }

<div class="banner row">
    <div class="large-12 columns">
        <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa.</p>
        <p>Boudin aliqua adipisicing rump corned beef. Nulla corned beef sunt ball tip, qui bresaola enim jowl. Capicola short ribs minim salami nulla nostrud pastrami.</p>
    </div>
</div>

<div class="services row">
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

推荐答案

每个.service是其父级.large-4.columns的唯一子级，所有这三个均是同一.services.row元素的子级.因此，您的:nth-child()应该位于.large-4.columns元素上

Each .service is the only child of its parent .large-4.columns, all three of which are children of the same .services.row element. Your :nth-child() should therefore be on the .large-4.columns elements:

.services > .columns:nth-child(n+2) > .service

或者，如果最多只有以下三列，则可以使用同级选择器代替:nth-child():

Or you can use a sibling selector instead of :nth-child() if you will only have three of these columns at most:

.services > .columns ~ .columns > .service

这篇关于用:nth-​​child选择一个嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！