Question

我有以下CSS，如果我按名称搜索但不是专业搜索

.displayresult {
    display: block;
}
#fname, #lname, #splabel, #addlabel, #pnlabel {
    border-width: 4px;
    border-bottom-style: double;
}
#first, #last, #specialty, #address, #phone {
    border-width: 4px;
    border-bottom-style: double;
}

如果用户选择专业并选择一个选项，则CSS仅在最后一个TD上添加双边框。

如何将CSS或jQuery脚本修改为：

使它在每个TD之后添加边框？

和/或

使一个TD白色，下一个TD灰色，下一个TD白色和下一个TD灰色等等？

我有以下jQuery，它不起作用并且与CSS做同样的事情：

$("#fname").css('border-bottom-style', 'double');

请访问上面的链接获取演示。

Answer 1

使一个TD白色和下一个TD灰色，下一个TD白色和下一个TD灰色等等

你可以这样做：

td:nth-child(odd) {
    background-color: gray;
}
td:nth-child(even) {
    background-color: white;
}

DEMO

Answer 2

您不应在多个元素中使用相同的ID。 Id被设计为奇点，分配给DOM中的单个元素。

您的代码无法正常工作的原因是因为您期望#fname能够像类一样运行。

您应该<td class="fname">而不是<td id="#fname">

使用CSS / jQuery在多个TD中添加底部边框

2 个答案: