html - 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 的行为符合定义。

Example

我不想分别定义不同的 (div.project h3) 和 (div.project p)，因为这看起来有点多余。我希望有一个更优雅的方式来解决这个问题。

Answer 1

您不必为 (div.project h3) 和 (div.project p) 定义单独的类，但您必须单独定义关系。这个:

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;
}

应该可以解决问题。