解释我们如何通过只使用一个父类遍历所有单个li？
解释我们如何通过只使用一个父类遍历所有单个li？
提问于 2016-04-13 13:01:12
我只想通过使用一个父类来遍历所有的li，例如：“这里我们使用mainDiv”，我们如何在css3中做到这一点？而不是Jquery或javascript。
css:
.mainDiv ul li:nth-child(1){
color:red;
}
.mainDiv ul li:nth-child(2){
color:blue;
}
.mainDiv ul li:nth-child(3){
color:yellow;
}请提及下面的代码
像wise一样，我只想使用一个父类名(mainDiv)来遍历ul > li (a，b，c)的第二组。我怎样才能通过css3做到这一点呢？
HTML：
<div class="mainDiv">
<ul>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-13 13:36:27
如果我理解你的问题，这个HTML代码可能会有帮助。
<head>
<style>
/* all list items will be blue */
.my-class li {
color: blue;
}
/* only second list will be bold */
.my-class ul:nth-child(2) li {
font-weight: bold;
}
/* all third list items will be underline */
.my-class ul li:nth-child(3) {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="my-class">
<ul>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>Stack Overflow用户
发布于 2016-04-13 13:36:47
我不太清楚你在说“穿越”时问了些什么。但是如果它匹配某些元素，那么您提供的css几乎可以满足您的要求。
要匹配mainDiv下的任何li：
.mainDiv li {
// my css
}只匹配第二个ul中的那些：
.mainDiv ul:last-child li {
// my css
}注意，:last-child允许选择mainDiv的最后一个子级。其他解决方案可以是使用(除其他外) ul:nth-child(2)或ul:nth-of-type(2)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36599230
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号