我有一些简单的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编码的图像).另一方面,它无法处理可变高度的行.
