如何考虑儿童:n-child

Question

我有一些简单的HTML

<div>row1</div>
<div>row2</div>
<div>row3</div>
<div>
    <div>row4.1</div>
    <div>
        <div>row4.2.1</div>
        <div>row4.2.2</div>
    </div>
    <div>row4.3</div>
    <div>row4.4</div>
</div>
<div>row5</div>

和css文件

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

我想把所有奇数行都设为绿色,而不是照顾层次结构.但结果我有这个

我究竟做错了什么？如何制作绿色行2,4.1,4.2.2和4.4.所有其他人都应该是白人.

只有css才能使用javascript吗？

Answer 1

不幸的是，您所描述的内容对于 CSS 选择器来说是完全不可能的。

选择器:nth-child（如:nth-of-type）仅在单个孤立的子组（而不是后代）的上下文中运行。事实上，这正是您所看到的：每个父母的偶数孩子都被突出显示。当您编写该选择器时，它将匹配行 2、4（即所有行 4.x 的父行）、4.2（即所有行 4.2.x 的父行）和 4.4，因为它们都是偶数索引的他们父母的孩子。

恐怕你的选择是（据我所知）：

• 展平 DOM，使所有行都是同一父元素的子元素。我怀疑这在您的应用程序中可能是不可能的。

• 使用 JS 和某种.highlightedCSS 类手动指定是否突出显示一行。不难，但如果添加/删除/移动行，保持最新状态也有点烦人。通过.row向每行添加 CSS 类并使用$('.row:even').addClass('highlighted');. 看看这个 jsfiddle。无 jQuery 的方法更加冗长，但也相当简单。

• 为线条高亮创建垂直重复的背景图像（或一组均匀间隔的 div）。如果您事先知道每行的高度，则可以简单地创建一个 1px 宽、行高两倍的图像。突出显示图像的下半部分并将背景图像设置为重复。一方面，这可以完全在 CSS 中完成（特别是对于内联 Base64 编码的图像）。另一方面，它无法处理可变高度的行。