Question

我需要增加给定类选择器的类专用性。

示例：

.test {
    color: #fff;
}

此刻，我需要输入.test.test以提高特异性。

是否有另一种方法可以解决此问题，例如函数gain（）或其他无需附加相同类名即可增加它的方法？

Answer 1

如果您使用的是SCSS，那么最简单的方法（除了使用！important强制使用之外）是包括一个父选择器，以使其具有更高的特异性：

.parent {
    .test {
        color: #fff;
    }
}

另一种方法是同时定位元素（如果元素总是相同类型）。这也将赋予它更高的特异性。

div.test {
    color: #fff;
}

如果其他所有方法均失败，则可以尝试将代码块移至SCSS文件中的较低位置，因为如果文档中的最后一个选择器具有相同的特异性，则它们将获胜。或者，在末尾给出重要的提示。

.test {
    color: #fff !important;
}

Answer 2

有多种方法： -您可以使用!important，因此您无需重复两次课程。但这是一个坏习惯。 -最好的方法-您可以将类代码放在最后一个，这样即使特异性相同，最后一个也将覆盖前一个。 -您可以使用父选择器或标签选择器，但这会使代码依赖于该父选择器或标签。 -您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

上了解有关特异性的更多信息

使用sass自动增加班级专用性

2 个答案: