Question

基本上我有一个带有1px纯灰色边框的表，每行包含一个单选按钮。我在通过单选按钮选择的行上应用1px红色边框。颜色不会改变。但是如果我将红色边框设置为2px，它就会改变。

我认为这与一些优先级问题有关，这意味着如果两个边界都是1px并且两者都是实心的，那么td适用，如果td边界是虚线的，那么实心边界适用于所选择的行。如果所选行的边框宽度大于td。

，则情况相同

我认为这就是它在css中的表现（我可能错了，在这里遗漏了一些东西）但是我想知道如何能够相对容易地解决这个问题（我可以设置一个背景图像并且没有边框等等），但这似乎很激烈）

编辑（我想说的一个例子）：

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse

如果你在其中一个tr上添加一个“red-border”类，如下所示：

<tr class="red-border">

并指定红色边框类样式，如下所示：

.red-border {
    1px solid red;
}

它不适用。但是如果你添加：

.red-border {
    2px solid red;
}

确实适用。如果将td边框设置为点线，也是如此：

table, td, th
{
    border:1px dotted black;
}

并将红色边框保持为1px红色，确实适用。

生病只是通过使用特定类来设置tds样式，并在click事件中添加。我只是好奇这是不是它的意图如何工作或者我错过了什么？

EDIT2：

我已经应用了这样的样式：

.red-border {            
                background-color: #fbfafa !important;
                color: #571c20;
                .first {
                    border-left: 1px solid #571c20 !important;
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .second {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .third {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .fourth {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                    border-right: 1px solid #571c20 !important;
                }
            }

它有时仍然不适用。它适用于第一行，第二行不适用上边框，第三行相同。在另一张桌子上，右边框不适用。

Answer 1

并非所有样式都适用于tr元素，例如border

tr

但是，您可以轻松设置表格元素或td元素的样式。

如果您想要边框，请将其添加到tds。

示例：

http://jsbin.com/avihuc/1/edit

td {
  border:solid black 1px;
}

如果你想要更高的“优先级”（实际上称为特殊性）

使用类似的东西：

table tr td {
}

战胜

tr td {}

作为特定的经验法则，

ID选择器的价值是元素选择器的100倍。类比元素选择器的价值高10倍。

！important非常具体，可以作为最后的手段使用。

Answer 2

似乎我找到了anwser：

.red-border {
    border: 1px double red;
}

我猜这种双重风格解决了tr和td边界之间的冲突。

Answer 3

还有另一种方法可以实现你想要的。您可以为tr的子元素设置样式 - td，而不是为tr设置样式。因为你有第一个td和最后一个的类，所以你甚至不必使用伪类。例如，左边框看起来像：

tr.red-border td.first {
  border-left: 1px solid red;
}

以下是完整示例：http://jsfiddle.net/htn1cjoq/。我没有改变你的html，只有css部分。希望它有所帮助。

表行样式被td样式css覆盖

3 个答案: