Question

当我想用:hover和:active定义css选择器时，我必须这样做：

#mainPage #content div.group:hover, #mainPage #content div.group:active {}

正如人们可以看到它重复#mainPage #content div.group并且可能变得混乱。有没有办法将它分组为：

#mainPage #content div.group:hover:active {}

Answer 1

我建议为元素ID添加group，并在下面写下代码可以减少工作量：

#idname.group:hover, #idname.group:active{}

Answer 2

在纯CSS中，如果不添加类或ID，就没有更好的方法可以更简洁地处理它们。

您可以考虑使用CSS预编译器（如LESS或SASS / SCSS）。

在LESS或SCSS：

#mainPage #content div.group {

    &:hover, &:active {
        color: red;
    }

}

Answer 3

您是否有理由在#mainPage #content之前使用div.group？一般来说，没有必要添加那么多的特异性＆＃39;对你的选择者来说 - 最好是拥有独特的类。因此，请确保类.group仅用于您希望具有相同样式的元素。

如果你这样做，你应该能够使用

设置这些元素的样式

.group { styles here}

您现在可能遇到一个问题，如果您尝试覆盖您设置的任何样式，例如#mainPage #content，那些更具体，因此实际上更强大＆＃39;比你没有使用完整父母列表的样式。如果可能，更改所有样式不包括父元素 - 如果您想将对象移动到html的不同部分，这也是值得的！

一般来说，建议不要使用id（#name）来附加css样式 - 如果可能的话，只使用类。除非你正在使用javascript，否则你不应该非常需要id。

显然上面有例外情况，而且据我所知，你可能有充分理由按照自己的方式做事 - 在这种情况下，SASS（正如其他一些答案中所建议的）对你来说是一个很好的解决方案。

如果对你没用，我希望至少这个答案可能会对后来可能会来的人有用 - 我注意到很多新来的人都没有意识到选择者的特殊性工作并最终使他们的风格比必要的复杂得多！：）

Answer 4

为什么使用#mainPage #content？ #content应足以在没有#mainPage的情况下找到您要查找的div。

id也只允许使用一次，而不是像类那样在多个地方使用。 Id通常保留用于脚本分配而不是CSS。我会做的

#content .group:hover{}
#content .group:active{}