1

EDIT3：http: //jsfiddle.net/ZgTHa/

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

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

我认为这就是 css 中的情况（我可能错了，这里遗漏了一些东西），但我想知道如何相对轻松地解决这个问题（我可以设置背景图像并且不设置边框等，但是看起来很激烈）

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

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

如果您在其中一个 tr 上添加“红色边框”类，如下所示：

<tr class="red-border">

并像这样指定 red-border 类样式：

.red-border {
    1px solid red;
}

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

.red-border {
    2px solid red;
}

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

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

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

我只是通过在点击事件中添加的特定类来设置 tds 的样式来解决它。我只是好奇这是它打算如何工作还是我错过了什么？

编辑2：

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

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

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

4

3 回答 3

1

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

tr

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

如果您想要一个边框，请将其添加到 tds.

例子：

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

td {
  border:solid black 1px;
}

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

使用这样的东西：

table tr td {
}

战胜

tr td {}

作为特异性的经验法则，

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

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

于 2013-07-10T20:30:31.793 回答
1

似乎我找到了答案：

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

我猜双样式解决了 tr 和 td 边界之间的冲突。

于 2013-07-11T09:16:57.923 回答
1

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

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

这是完整的示例：http: //jsfiddle.net/htn1cjoq/。我没有更改您的 html，仅更改了 css 部分。希望能帮助到你。

于 2017-10-31T11:50:06.463 回答