HTML

Question

这对我来说应该很容易弄明白，但此时它已经花了我几个小时，所以我肯定可以在这里使用一些帮助。

基本上我有一个<tr><td></td></tr>元素的可排序统计表。该表格可以找到here。

当我点击顶部的任何类别时，系统会在整个统计数据列中下拉一个完整的黄色突出显示框。它工作正常，直到我放了

tr:nth-child(even) {
    background-color: #f1f1f1;
}

元素到我的*.css以获得所有偶数行上的浅灰色背景。

我很确定问题是我有两个相互矛盾的背景颜色，一个在我上面展示的css中，另一个使列突出显示为黄色。我只需要确保黄色行始终位于顶部（如果可能的话）

此外，here是一个正确演示列突出显示器应如何工作的链接。它目前正在运行自己独立的*.css

对于任何想知道的人，是的，我是html的新手，我在过去一两周内只做过这样的事情。

Answer 1

CSS有一个优先系统。每个选择器根据具体的具体情况给出分数，并获得最高分。标记获得1分，类名获得10分，ID获得100分。

因此，例如，#mytable > tr > td.even将得到112分。

如果你使黄色列选择器比偶数/奇数行选择器更具体，它会赢，你会看到你想要的黄色背景。

如果您想要更好地理解，有很多关于它如何实际工作的资源，并且还有边缘情况的解决方法。例如，请参阅this。

Answer 2

saundmi01.html

样式表被动态加载到头部。这是一场噩梦...... 433 !important s !!! 我以前从未在一个样式表中见过这么多。可以安全地假设，如果您想要更改，添加和/或删除任何样式，您需要：

在更正前面提到的HTML后，在开头<style>标记下方和<body>上方添加div.page_container块：

</head>
<body>

<style>

</style>

<div id="page_container">

接下来，将以下规则集放在<style>块中：

</head>
<body>

<style>
    .stats_table tr:nth-child(even) {
         background-color: #0ff; 
    }
</style>

<div id="page_container">

采取这些步骤应该保证控制你的表甚至有序的行。如果这不起作用，请添加!important或加倍类并添加标记（例如table.stats_table.stats_table）。如果你想要最高的特异性尝试这个怪物：

table.stats_table.stats_table.sortable.sortable.row_summable.row_summable > tbody > tr.full.full { background-color: #00ffff !important; }

根据此online tool，此选择器的特异性为12。

Answer 3

试试这个..

.stat_average, .stat_total:nth-child(odd) {background-color: #f1f1f1};

为什么因为在tfoot中有3个tr（表格行）所以你给了nth-child(even)所以偶数行中没有内容我的意思是在第二行中我发现的问题。请尝试以上代码，它可能会对您有所帮助。