html - css 覆盖原因

标签 html css

为什么第 2 行“测试 2”被橙色覆盖?

<head runat="server">
    <title></title>
    <style type="text/css">
        td
        {
            color: white;
        }
        .testclass td
        {
            background-color: Orange;
        }
    </style>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr class="testclass">
                <td style="background-color: Blue">
                    Test 1
                </td>
            </tr>
            <tr class="testclass">
                <td bgcolor="fushcia">
                    Test 2
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

最佳答案

bgcolor 是一种表示性 HTML 属性。它将始终被任何实际的 CSS 样式声明覆盖。

spec 中提到了这一点:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.

用简单的英语来说,这意味着表现属性几乎没有意义,甚至比作者样式表中的 * 规则中的样式更脆弱(它也有零 specificity )。

关于html - css 覆盖原因,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11834426/

相关文章:

css - 如何在不指定父元素高度的情况下显示子元素 ('.cylon' )

html - 如何在不同尺寸的屏幕上用背景图片在合适的位置设置表格

html - 不能一次悬停整行

javascript - class 和 className 在 css 继承方面有什么区别?

html - Bootstrap 表单 - 调整屏幕大小时不会出现滚动

javascript - jQuery + Django : get data from HTML table

HTML5 PHP 网络套接字

javascript - 滚动时显示 div 并更改行为

jquery - 将 div 高度设置为窗口高度(使用 CSS 不是 100%)

html - 我们如何将两个词分成单独的行?