CSS，为动画定义多个类标记属性

Question

有没有办法为生活在同一类中的'p'和'h1'到'h6'定义相同的属性？

例如，我尝试了这个：

div.project h1, h3, p {
    opacity: 0;
    transition: 0.8s;   
}
div.project:hover h1, h3, p {
    opacity: 1;
}

希望当我将鼠标悬停在.project类中的任何元素（h1、h3或p）上时，它们的行为也会相同。

但是，只有h1的行为符合定义。

示例

我不想分别定义不同的（div.projecth3）和（div.prrojectp），因为它看起来有点多余。我希望能有一个更优雅的方式。

Answer 1

您不必为（div.projecth3）和（div.prrojectp）定义单独的类，但您必须分别定义关系。此：

div.project h1, div.project h3, div.project p {
    opacity: 0;
    transition: 0.8s;   
}
div.project:hover h1, div.project:hover h3, div.project:hover p {
    opacity: 1;
}

应该做到这一点。

Answer 2

不，没有实用的。CSS Selectors Level 4提供:matches()选择器：

div.project :matches(h1, h3, p) {
    …
}

目前支持不好，但简单的并没有什么真正的问题

.project h1, .project h3, .project p

您也可以使用CSS预处理器，例如Sass或LESS:

.project {
    h1, h3, p {
        …
    }
}