vdh*_*ant 5 css css-selectors css3
我试图条纹交替元素的颜色.但我希望行颜色仅交替显示可见行.如果你看看下面这里是我试图让它工作的尝试.
<!DOCTYPE html>
<html>
<head>
<style>
p:not(.hide):nth-child(odd)
{
background:#ff0000;
}
p:not(.hide):nth-child(even)
{
background:#0000ff;
}
.hide { display:none; }
</style>
</head>
<body>
<p>The first paragraph.</p>
<p class="hide">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>
你不能用纯CSS做这个,因为:nth-child选择器是根据元素计算的,:not不会过滤DOM中的元素位置.您需要使用JavaScript来实现完全灵活的解决方案.
你仍然可以通过制作元素之后不可思议地做到这一点.hide,:nth-child交替应该是它们的颜色:
.hide + p:nth-child(odd) {
background: #0000ff;
}
您可以继续添加类似规则的兄弟姐妹越来越多的组合.hide和p,但是这是非常不灵活.
| 归档时间： |
|
| 查看次数： |
2099 次 |
| 最近记录： |