设置每个元素的第一个和最后一个元素的样式
设置每个元素的第一个和最后一个元素的样式
提问于 2015-06-16 07:18:45
我试图通过应用"red“类来设置"wrapper”类中第一个和最后一个列表项的样式。我在页面上有多个带有"wrapper“类的部分。
<div class="wrapper">
<div class="section">
<ul class="parent">
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="section">
<ul class="parent">
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
</ul>
</div>
</div>回答 3
Stack Overflow用户
发布于 2015-06-16 07:23:48
您可以使用css3来完成此操作：
.parent li:first-child, .parent li:last-child {
background-color: red;
}第一个和最后一个li (列表项)将在每个.parent元素中读取
Stack Overflow用户
发布于 2015-06-16 07:43:04
尝试设置"wrapper“类中第一个和最后一个列表项的样式
尝试使用:nth-of-type()、:nth-last-of-type()
.wrapper li:nth-of-type(1),
.wrapper li:nth-last-of-type(1) {
background-color: red;
}<div class="wrapper">
<div class="section">
<ul class="parent">
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="section">
<ul class="parent">
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
<li class="child">List Item</li>
</ul>
</div>
</div>
jsfiddle https://jsfiddle.net/n2bg3zu4/4/
Stack Overflow用户
发布于 2015-06-17 11:41:58
使用jQuery，您可以编写
$('.wrapper .parent li:first-child, .wrapper .parent li:last-child').addClass('red')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30856516
复制相关文章
相似问题
腾讯云开发者
