从两个级别上选择nth子级
从两个级别上选择nth子级
提问于 2022-05-25 15:06:03
我有这样一个html结构：
<div class='parent'>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
</div>因此，我们有父->行->按钮，1父行，2行，每一行有2-4个按钮。我是否可以使用css选择器(比如nth-child)，但它将所有按钮作为兄弟(即使它们位于不同的行)？类似于：
.parent .child:nth-child(randomNum) {
}其中randomNum是介于1和numOfTotalButtons.length之间的一个数字
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-05-25 15:46:58
恐怕只使用CSS是不可能的。您可以使用jQuery或纯Javascript将其存档：
//jQuery
$(".button").eq(0).css("color", "red");
$(".button").eq(1).css("color", "green");
//pure javascript
document.querySelectorAll(".button")[2].style.color = "blue";
document.querySelectorAll(".button")[3].style.color = "pink";<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
</div>
Stack Overflow用户
发布于 2022-05-25 15:14:02
使用同级选择器~。
.row ~ .row > .button {
color: hotpink;
}
.row ~ .row ~ .row > .button {
color: blue;
}<div class='parent'>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
</div>
Stack Overflow用户
发布于 2022-05-25 15:45:26
“我是否可以使用css选择器(比如nth-child)，但它将所有按钮作为兄弟(即使它们位于不同的行)？
是的，选班员。除了这一点，您还有什么其他的要求和/或需要解决的问题吗？
.button {
outline: red 3px solid;
}<div class='parent'>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
<div class='row'>
<div class='button'>
button
</div>
<div class='button'>
button
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72380108
复制相关文章
相似问题
腾讯云开发者
