用于选择其他祖先的CSS解决方案
用于选择其他祖先的CSS解决方案
提问于 2021-06-02 12:22:39
有没有办法让这篇文章用CSS换色呢？我尝试使用任何东西:nth-child(奇数)，但它不适用于嵌套的div。
<div class="whatever">
this is some text
<div class="whatever">
this is some text
<div class="whatever">
this is some text
<div class="whatever">
this is some text
</div>
</div>
</div>
</div>回答 4
Stack Overflow用户
发布于 2021-06-02 12:31:27
您可以使用JavaScript来实现此目的：
var els = document.getElementsByClassName("whatever");
let even = false;
for (let i=0;i<els.length;i++) {
if (!even) {
els[i].style.color = "red";
} else {
els[i].style.color = "blue";
}
even = !even;
}Stack Overflow用户
发布于 2021-06-02 12:49:44
您可以使用nth-child选择器实现替代颜色。请看一下代码。
.whatever:nth-child(odd) {
color: red;
}
.whatever:nth-child(even) {
color: blue;
}<body>
<div class="whatever">this is some text</div>
<div class="whatever">this is some text</div>
<div class="whatever">this is some text</div>
<div class="whatever">this is some text</div>
</body>
Stack Overflow用户
发布于 2021-06-02 12:50:25
：nth- child (奇数)方法用于有多个子div时，但在本例中，每个div都只有一个子div，这就是它不起作用原因。
案例1：
var elements = document.getElementsByClassName("whatever");
for (let i=0;i<elements.length;i++) {
if (i%2==0) {
elements[i].style.color = "Yellow";
} else {
elements[i].style.color = "Green";
}
}<div class="whatever">
this is some text
<div class="whatever">
this is some text
<div class="whatever">
this is some text
<div class="whatever">
this is some text
</div>
</div>
</div>
</div>
案例2:如果你想使用css改变文本的颜色，那么你可以应用不同的类
.text-green{
color:green;
}
.whatever{
color:yellow
}<div class="whatever">
this is some text
<div class=" text-green">
this is some text
<div class="whatever">
this is some text
<div class=" text-green">
this is some text
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67798893
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号