Question

我之前曾asked a question就这个问题提供了很好的答案。我从“发现”了上下文造型的醉人力量（http://www.w3.org/TR/css3-selectors/#selectors） - 再次感谢大家 - 现在我被迷住了。

我在上下文风格应用方面取得了很好的进展：

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

但我遇到了一些问题。

以下是我正在尝试做的截图：

enter image description here

我的第一个问题是，我是否过于热衷于尝试应用上下文规则并使其更难以实现？

如果不是，那么根据屏幕截图，我需要做些什么才能完成我的目标样式？

三，如何使这种跨浏览器兼容？即使按原样，它在其他浏览器中看起来也很糟糕。

Answer 1

我认为如果不在HTML中使用适当的TR和TD标记上的某些类，您将无法完成此任务。在this fiddle我已将第一类添加到每个第一行TR，最后类添加到每个最后一行TR，以及类点缀到应该点缀的单元格。然后，通过以下附加样式，我能够展示您的目标。

.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;}

Answer 2

使用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”单元格成为其行的第一个子节点。

Answer 3

在回答你的第一个问题时，是的，我认为你过于热心。而不是担心虚线或固体边框，为什么不花时间使内容更有用＆amp;可读。

示例中的当前样式（颜色和纯黑色边框）压倒了实际内容。一些资源：

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

3 个答案: