css - 在表格上使用上下文样式将虚线边框应用于特定单元格

Question

我之前有 asked a question在这个问题上，你们提供了很好的答案。从那以后，我“发现”了上下文样式的令人 Revel 的力量 (http://www.w3.org/TR/css3-selectors/#selectors)——再次感谢大家——现在我迷上了。

我在将上下文样式应用到我当前的设计方面取得了很好的进展:

http://jsfiddle.net/gFA4p/200/

不过，我遇到了一些问题。

这是我正在尝试执行的操作的屏幕截图:

我的第一个问题是，我是否过于热衷于尝试应用上下文规则并使其变得比需要的更难？

两个，如果没有，根据屏幕截图，我需要做什么才能完成我的目标样式？

三、如何让这个跨浏览器兼容？即使按原样，它在其他浏览器中看起来也很不稳定。

Answer 1

如果不在 HTML 中将一些类放在适当的 TR 和 TD 标记上，我认为您将无法完成此任务。在 this fiddle我已将 first 类添加到每个第一行 TR，将 last 类添加到每个最后一行 TR，以及 dotted 到应该点缀的单元格。然后，使用以下附加样式，我可以显示您想要的内容。

.geniusPicks table td.dotted {border: 1px dotted black !important;}
.geniusPicks table tr.first td.dotted {border-top: none !important;}
.geniusPicks table tr.last td.dotted {border-bottom-style: solid !important;}
.geniusPicks table tr.pickBody.first td.dotted {border-top: 1px solid black !important;}