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

不，没有实用的。 CSS Selectors Level 4提供the :matches() selector：

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

目前支持并不好，但简单的

并没有什么问题

.project h1, .project h3, .project p

您还可以转到CSS预处理器，例如Sass或LESS：

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

Answer 2

您没有为（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;
}

应该这样做。

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

2 个答案: