HTML – 如何考虑儿童：nth-??child

发布时间：2020-12-14 22:54:34 所属栏目：资源来源：网络整理

导读：我有一些简单的HTML 和css文件 div:nth-child(even){ background-color:green; } 我想把所有奇数行都设为绿色,而不是照顾层次结构.但结果我有这个我究竟做错了什么？如何制作绿色行2,4.1,4.2.2和4.4.所有其他人都应该是白人. 只有css才能使用javascript吗？

我有一些简单的HTML


和css文件

div:nth-child(even)
{
   background-color:green;    
}

我想把所有奇数行都设为绿色,而不是照顾层次结构.但结果我有这个
我究竟做错了什么？如何制作绿色行2,4.1,4.2.2和4.4.所有其他人都应该是白人.
只有css才能使用javascript吗？


最佳答案
不幸的是,你所描述的内容对于CSS选择器来说是完全不可能的.
：nth-??child选择器(如：nth-??of-type)仅在一个孤立的子组(不是后代)的上下文中操作.事实上,这正是你所看到的：每个父母的偶数孩子都被突出显示.当您编写该选择器时,它将匹配第2,4行(即所有行4.x的父代),4.2(即所有行4.2.x的父代)和4.4,因为它们均为偶数索引他们父母的孩子.
我担心你的选择(我认为)：
>展平DOM以使所有行都是同一父元素的子元素.我怀疑在您的应用程序中可能无法实现.
>手动指定是否使用JS和某种.highlighted CSS类突出显示行.如果添加/删除/移动行,也不要太难以保持最新状态.通过在每行中添加一个.row CSS类并使用$(‘.row：even’).addClass(‘highlighted’);可以很容易地在jQuery中完成.请参阅this jsfiddle.无jQuery方法更详细但也非常简单.
>为线条高光创建垂直重复的背景图像(或一组均匀间隔的div).如果您事先知道每条线的高度,则可以创建一个宽度为行高两倍的1px宽图像.高亮显示图像的下半部分并设置背景图像以重复.一方面,这可以完全在CSS中完成(特别是使用内联base64编码的图像).另一方面,它无法处理可变高度的行.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!