css - 选中复选框不透明度，即使在之后声明时也会覆盖规则

Question

我想在默认情况下隐藏一个复选框，并在选中时显示一个复选框，在 table-headd 中或悬停相应的行:

.table td input[type=checkbox] {
    opacity: 0;
}

.table th input[type=checkbox], 
.table tr:hover input[type=checkbox], 
input[type=checkbox]:checked {
    opacity: 1;
}

在 Chrome 开发者工具中检查结果时，第二条规则适用，但不透明度属性被划掉。我需要添加 !important 以获得所需的结果。这是为什么？

Answer 1

这是因为CSS的特殊性。您可以在没有 !important 语句的情况下为规则提供更多的细节，使其更重要:

.table td input[type=checkbox] {
    opacity: 0;
}

.table th input[type=checkbox], 
.table tr:hover input[type=checkbox], 
.table tr td input[type=checkbox]:checked {
    opacity: 1;
}

特异性如何运作？

• 内联样式元素:1000
• ID:100
• 标签:10
• 类名和属性:1

如果你求和，你就会得到特异性。应用的规则越具体。