保留覆盖先前样式的表格边框答案

【问题标题】：Retain table borders overriding previous style保留覆盖先前样式的表格边框
【发布时间】：2014-01-20 23:23:07
【问题描述】：

我在 CSS 方面经验不足，有人能告诉我如何覆盖样式以使名为“现有价格中断”的单元格保留其左边框吗？类似地，下面的会做同样的事情，拆分内容。但是标题的其余部分应该没有它们，就像现在一样。

这是小提琴：http://jsfiddle.net/kacpr/YkL5j/2/

这是我想在“单元”级别覆盖的部分：

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

【问题讨论】：

使用!important 例如： border: 0 !important;
为什么有人应该使用这样的选择器？
@HashemQolami 也许你应该问问 Bootstrap 的人。
我强烈建议您调整表结构以使其在语义上更正确：jsfiddle.net/YkL5j/9。您当前的结构看起来像是将表格用于布局和表格用于表格数据。
(+1) 是的，这是另一个可能的改进，在被几个不同的成员重复之后，我认为它会改进一个开发者！ :-)

标签： css twitter-bootstrap-3

【解决方案1】：

这似乎不是使用 CSS 选择器的正确方法，但这里有一个可能的解决方案（单元格没有类，因此我们使用 ":nth-child()" 作为示例：

.table > thead > tr > td:nth-child(4) {
    border-left: 1px solid #ff0000;
}

http://jsfiddle.net/YkL5j/3/

如果您需要向后浏览器兼容性，则可能需要为所选单元格分配一个类：.existingPriceBreaks {}

使用 CSS 选择器的更好方法可能是：

.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}

...除非您出于某种原因打算使用嵌套表...

【讨论】：

谢谢。我不确定它到底是如何工作的，以及你对选择器的看法。有什么办法可以稍微修改一下，让边框在“现有价格突破”单元格中结束？我希望它把它旁边的行分开，但在第一行是不可见的（因为反正没有文字）。
让我在 JSFiddle 中进行编辑，因为这是一个额外的特定要求......（是的 - 那是 3 行......错字......）
在您达到您的要求后，我保留了我的最终解释...我在 2 个单元格处添加了一个类，并将 :nth-child 替换为一个类。这是仅选择您需要调整的单元格所必需的！那么造型就简单了，但是有“但是”……
更强的选择器：在示例中，您有 ".table > thead > tr > td {border: 0; }" 并且要覆盖它，您需要相等或更强的选择器：".table > thead > tr > td.class123 { 左边框：1px 实心 ...; }"。请注意，我保留您提供的选择器：“.table > thead > tr > td”并添加一个类，这使我的选择器更强大！我希望我已经解释得很好。您可以尝试删除所有“>”选择器并检查结果！！！
这是另一个广泛的 CSS 主题，请仔细阅读此主题：stackoverflow.com/questions/19117761/… ...关于您的问题 - 它更强大，但它需要类才能达到特定效果，这就是它变得更强大的原因。您可以简单地省略该类并使其与您的选择器相同-然后它们是平等的，并且您将其放置在另一个之后的那个更强（我希望解释它，否则让其他人用更好的英语解释它）

【解决方案2】：

你可以使用一个类，例如leftBordered 覆盖常见的边框定义，例如：

/* in html */
<tr>
  <td>Currency</td>
  <td style="font-weight: normal;">EUR</td>
  <td></td>
  <td colspan="2" class="leftBordered">Existing price breaks</td>
  <td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */

/* in css */
table > thead > tr > td.leftBordered { 
  border-left: 1px solid #ccc;
}

在这里查看小提琴的工作示例：http://jsfiddle.net/YkL5j/5/

【讨论】：

这也是我之前基本尝试过的，但是好像不行。除非我做错了什么，否则您的建议是：jsfiddle.net/kacpr/YkL5j/4
@kacpr 由于您使用 CSS 选择器的方式，这不起作用。我在回答中添加了更多解释，我真的建议您使用简单的选择器（如 ernd 或“.table td.leftBordered”提出的），而不是在每个规则中使用“>”直接子级。否则，您应该始终通过“>”选择器重置样式...（请参阅工作示例）...
@Minister 直接后代选择器对特异性没有影响（例如，.foo > .bar 在特异性方面等于.foo .bar）。 Bootstrap 是过度具体的选择器的罪魁祸首。 OP别无选择，只能使用同样强大或更强的选择器。
@cimmanon 是的 - 我试图解释一下 - “OP别无选择，只能使用同样强大或更强的选择器”。原因是他在根本不需要的地方使用了这个直接的子选择器......（对不起我的英语不好！我还在学习！）