Question

我想默认隐藏一个复选框，并在选中它时显示一个复选框，在表头或相应的行中悬停：

.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

如果你得到总和，你将获得该特定。它应用的规则越具体。

Answer 2

你真的不需要使用！important如果你做一个特定的第一个配置，那么input[type=checkbox]:checked使用.table td input[type=checkbox]:checked，这样css将应用第二个规则，因为它与第一条规则一样具体：

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

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

Answer 3

由于

.table td input[type=checkbox]

比

更多 specificity

input[type=checkbox]:checked

特异性计数超过宣布规则的垂直顺序，因此第一条规则胜出。

选中的复选框不透明度，即使在后面声明，规则也会被覆盖

3 个答案: