我在定位嵌套元素时遇到问题:nth-child()选择器。我怎样才能瞄准第二个和第三个.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>
Each .service是其父母的唯一孩子.large-4.columns，所有三个都是同一个的孩子.services.row元素。你的:nth-child()因此应该在.large-4.columns要素：
.services > .columns:nth-child(n+2) > .service
或者您可以使用兄弟选择器代替:nth-child()如果您最多只有其中三列：
.services > .columns ~ .columns > .service
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
