Question

我有一个<DIV>结构表，我想为备用行提供背景颜色。

最初我的<DIV>结构是（如Fiddle - *Option 1 中所示）： *

HTML

<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
</div>

CSS

 .Case {
    border:1px solid #dbdbde;
    font-weight:normal;
}
.group {
    display:table;
    border-top: 1px solid #dbdbde;
    width: 100%;
}
.group div {
    vertical-align:top;
}
.group:nth-child(even) {
    background-color:#f9f9f9;
}
.subdiv {
    display:table-cell;
    border-left:1px solid #dbdbde;
    padding:10px;
    word-wrap: break-word;
}
.subdiv:nth-child(1) {
    border-left:none;
}

工作得很好!!! 但是当我再添加一行“空”DIV 时，这个“.group:nth-child(even) {background-color:#f9f9f9;}”代码停止了工作。

（如Fiddle - *Option 2 中所示）： *

以下是新代码：的 HTML

<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
</div>

CSS同样刚刚添加为“.empty”类

的顶级juist添加样式

   .empty {
    background-color:#ccc;
    display:block;
    width:100%;
    height:15px;
}

请建议我缺少什么???

Answer 1

它将破坏第一种格式，但您可以尝试

.group:nth-child(4n-1) {
    background-color:#f9f9f9;
}

演示：Fiddle

Answer 2

你的问题是第n个孩子计算所有元素，而不仅仅是你在选择器中设置的类的元素。

一个可行的解决方案是不创建分隔符div。

相反，在容器中设置一个aditional类，然后通过margin-bottom（以及阴影使得空间变为灰色）使div更加间隔。

HTML（片段）

<h1>Option 2</h1>

<div class="Case sep">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>

我删除了空行，并将sep类添加到容器中。

在CSS中，添加

.sep .group {
    margin-bottom: 15px;
    box-shadow: 0px 15px #ccc;
}

demo

Answer 3

抱歉，我不太了解你的问题所以试试这个：

<div class="group empty"></div>

为备用<div>行</div>提供背景信息

3 个答案: