我之前在这个问题上asked a question，你们提供了很棒的答案。自从我“发现”了上下文样式的令人陶醉的力量 (http://www.w3.org/TR/css3-selectors/#selectors) -- 再次感谢你们 -- 现在我被迷住了。
我在将上下文样式应用到我当前的设计方面取得了不错的进展：
http://jsfiddle.net/gFA4p/200/
不过，我遇到了一些问题。
这是我正在尝试做的截图：
我的第一个问题是，我是否过于热衷于尝试应用上下文规则并使其变得比需要的更难？
两个，如果不是，根据屏幕截图，我需要做什么来完成我的目标样式？
三、如何让这个跨浏览器兼容？即使按原样，它在其他浏览器中看起来也很不稳定。
【问题讨论】：
标签： css css-selectors border cell css-tables
如果不在 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;}
【讨论】：
使用 CSS 选择器并不过分，只要它能让您的 HTML 代码和样式表更简单、更易于理解和修改即可；
例如，在您的 HTML 中使用较少的 className 属性。
此外，这是学习它们的最佳方式！
对于您问题的第二部分，我建议您使用这个 CSS ( http://jsfiddle.net/S8Bne/) :
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;}
.geniusPicks table tr#picksHeading {border:0px solid; height:30px;}
.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;}
.geniusPicks table tr.pickHeading {border:0px solid;}
.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;}
.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;}
.geniusPicks table tr.pickConsensusBody td {
border-left:1px solid;
border-top:1px solid;
background:grey;
}
.geniusPicks table tr.pickBody td {
border-left:1px solid;
border-top:1px solid;
}
.bigGap td {height:19px;}
.smallGap td {height:10px; border-top:solid 1px black;}
.geniusPicks table th,
.geniusPicks table th:last-child,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}
/* Border Left Radius */
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td {
border-radius:15px 0 0 0;
-moz-border-radius:15px 0 0 0;
-webkit-border-radius:15px 0 0 0;
-khtml-border-radius:15px 0 0 0;
}
/* Border Right Radius */
.geniusPicks table thead tr#picksHeading th:last-child {
border-radius:0 15px 0 0;
-moz-border-radius:0 15px 0 0;
-webkit-border-radius:0 15px 0 0;
-khtml-border-radius:0 15px 0 0;
}
.geniusPicks table .pickHeading+tr td:nth-child(4) {
border-left-style:dotted;
border-left-color:black;
border-left-width:1px;
border-top-style:solid;
border-top-color:black;
border-top-width:1px;
}
.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]),
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) {
border-top-style:dotted;
border-top-color:black;
border-top-width:1px;
border-left-style:dotted;
border-left-color:black;
border-left-width:1px;
}这个解决方案的好处是它根本不需要修改您的 HTML 代码。
但是，如果浏览器（例如 IE8）不支持 CSS3 :nth-child 或 :not 伪类，则必须加点的边框将保持实心。
如果您更喜欢只依赖 CSS2 的东西，请告诉我。
但在这种情况下，有必要为每个必须加点的单元格添加class 属性，
或拆分具有 7 个单元格的每一行，以便每个“vlah”单元格成为其行的第一个子级。
【讨论】：
在回答您的第一个问题时，是的，我认为您过于热心了。与其担心虚线或实线边框，为什么不花时间让内容更实用和可读。
您示例中的当前样式（颜色和纯黑色边框）压倒了实际内容。一些资源：
【讨论】：