表行样式被 td 样式 css 覆盖

Posted 2023-02-23

【中文标题】表行样式被 td 样式 css 覆盖

【英文标题】：table row style overridden by td style css

【发布时间】：2013-07-08 22:42:11

【问题描述】：

编辑3： 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 
    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;
                
            

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

【问题讨论】：

请显示您的代码，css 类仅通过其选择器而不是样式本身覆盖其他类，除非它们在样式中使用 !important。

我们真的不应该询问这个例子中的代码；在不知道您实际在做什么的情况下，我们应该如何提供建议？

jsfiddle.net/ZgTHa 当我尝试将红色边框设置为 1px 时出现问题。

【参考方案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 非常具体，可以作为最后的手段。

【讨论】：

您可以设置 tr 元素的样式，但不能设置边框。

我猜 display none 仍然有效。但大多数东西都不起作用，比如颜色、边距、填充。

jsfiddle.net/ZgTHa 你也可以设置边框样式。我遇到的问题是当我将红色边框宽度更改为 1px 时。

我想你可以。出于某种原因，它不适用于我的演示 jsbin.com/otofoq/1/edit

【参考方案2】：

似乎我找到了答案：

.red-border 
    border: 1px double red;

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

【参考方案3】：

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

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

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