如何解决子类的css nth-child不起作用
我只想以不同的方式设置“可见性”元素的格式。 nth-child
似乎不起作用。
有人可以告诉我为什么它不起作用。或透露其他解决方案。
非常感谢
.owl-stage div.visibility:nth-child(1){
background: blue;
}
.owl-stage div.visibility:nth-child(2){
background: red;
}
<div class="owl-stage">
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="test">The paragraph.</div>
</div>
解决方法
您需要指定n
.owl-stage div.visibility:nth-child(1n){
background: blue;
}
.owl-stage div.visibility:nth-child(2n){
background: red;
}
,
nth-child
仅选择子计数,而不选择类。因此从技术上讲,第一个.visibility
是第7个孩子。而且没有所谓的nth-class
但是您仍然可以通过相对选择器+
来实现:
/* nth-class(1) */
.owl-stage div:not(.visibility) + .visibility {
background: blue;
}
/* nth-class(2) */
.owl-stage div:not(.visibility) + .visibility + .visibility {
background: red;
}
<div class="owl-stage">
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="test">The paragraph.</div>
</div>
,
nth-child()
只是看.owl-stage div
的兄弟姐妹。它无法过滤visibility
之类的类。有关第n类过滤的想法,请参见here。
根据您的情况,您可以使用第7个或第8个孩子,如下所示:
.owl-stage div.visibility:nth-child(7) {
background: blue;
}
.owl-stage div.visibility:nth-child(8) {
background: red;
}
<div class="owl-stage">
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item visibility">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="owl-item">The paragraph.</div>
<div class="test">The paragraph.</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。