css - 强制 CSS 优先级成为我想要的方式

Question

我希望这个 CSS 的优先级与它们的顺序完全相同：

/*Highlight every second row in a .styledtable without .no-odd-row-higlight*/
.styledtable:not(.no-odd-row-highlight) tr:nth-child(odd) td{
    background:#eeeeee;
}

/*Orange highlight, normally used by PHP*/
.highlight-orange, .highlight-tds-orange td{
    background:#ff4000;
}

/*Yellow highlight, normally used by JS*/
.highlight, .highlight-tds td{
    background:#f7fe2e;
}

我理解他们不这样做的原因是特异性，但我无法弄清楚如何让它按我的意愿工作。如何使第一条规则最不重要，第二条规则覆盖第一条规则，最后一条规则覆盖它们？

谢谢

Answer 1

请记住这一点，当两条规则的权重相同时，最后指定的规则获胜！. 如果前面的示例被声明并且其中一个被设置为 !important，那么具有 !important 的那个将具有最高优先级！

Answer 2

假设您可以控制更改所有三个的定义：

.highlight.highlight {
    /*things*/
}

严格来说比任何只有一个类的规则更具体，包括一个普通的.highlight.

Answer 3

我刚刚添加!important了第二条和最后一条规则。这样第二个和最后一个会覆盖第一个，但最后一个会覆盖第二个，因为它在它之后。