HTML-CSS在同一样式表中按标记样式覆盖ID样式-堆栈溢出

顺晟科技

2022-10-18 12:53:57

根据特性，层次结构ID样式应该在标记样式之上，但在下面的代码片段中，情况正好相反！

我希望桌子是蓝色的，但它是红色的，谁能解释一下？

#body table {
    background: red;
}

#table {
    background: blue;
}

<代码><；HTML（>；）<；头部>；<；/标题>；<；body ID=“ body ”>；<；表格ID=“表格”>；<；TR>；<；Th style=position：sticky；顶部：0；Z指数：1；背景：灰色；>；某物<；/th>；<；/tr>；<；tr>；<；TD>；HA<；/TD>；<；/TR>；<；tr>；<；TD>；HA<；/TD>；<；/TR>；<；tr>；<；TD>；HA<；/TD>；<；/TR>；<；tr>；<；TD>；HA<；/TD>；<；/TR>；<；/表格>；<；/正文>；<；/HTML>；

顺晟科技：

CSS SpecifityCSS Specifity在一节中对其进行了解释：如何计算特异性？

对于

<html>
<head>
</head>
<body id="body">
<table id="table">
    <tr>
        <th style="position: sticky;
            top: 0;
            z-index: 1;
            background: gray;">something</th>
    </tr>
    <tr><td>ha</td></tr>
    <tr><td>ha</td></tr>
    <tr><td>ha</td></tr>
    <tr><td>ha</td></tr>
</table>

</body>
</html>

，

您有以下特殊性计算：100+1=101（ID+元素）

对于#body table，您具有以下特定计算：100=100（ID）

因此<html> <head> </head> <body id="body"> <table id="table"> <tr> <th style="position: sticky; top: 0; z-index: 1; background: gray;">something</th> </tr> <tr><td>ha</td></tr> <tr><td>ha</td></tr> <tr><td>ha</td></tr> <tr><td>ha</td></tr> </table> </body> </html>具有较高的特异性（101>；100).例如，您可以从body#body table中删除#，而不是指定1+1=2并且低于#body table（100）。

上一篇：html出现的问题 HTML-为什么下一篇：JavaScript-哪一个是合适的

网站建设

Html

HTML-CSS在同一样式表中按标记样式覆盖ID样式-堆栈溢出