CSS选择器可以继承＆＃34;继承＆＃34;来自另一个选择器的所有声明？

Question

有没有办法

一个CSS选择器＆＃34;继承＆＃34;来自另一个选择器的所有声明？

例如，假设我有一些简单的img转换规则：

.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

有没有办法做到以下几点？

body.home.page .box-2 figure img {
    /* inherit from .tilt */
}

body.home.page .box-2 figure img:hover {
    /* inherit from .tilt:hover */
}

我意识到我可以通过添加＆＃34;倾斜＆＃34;如果我有权访问底层代码，则将类添加到img标记，但我不知道。我也知道我可以使用javascript在运行时将倾斜类添加到img标签，但我可以访问更改的是CSS。

基本上，我想通过不必在CSS文件中反复重复这些声明来保存代码。有没有办法做到这一点？同样，我只能访问CSS文件，没有别的。

Answer 1

您可以使用多个选择器。用逗号分隔它们。

.tilt,
body.home.page .box-2 figure img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

除非您使用CSS预处理器，否则您实际上无法使用您所描述的语法。

Answer 2

是的，这可以通过CSS进行分组，如下所示：

.tilt , body.home.page .box-2 figure img {.....}

.tilt:hover,body.home.page .box-2 figure img:hover{...}

Answer 3

不，选择器不会继承任何东西。元素的属性从父元素继承值。

关于什么似乎是预期的问题（与提出的问题相反），它是关于组织你的标记和CSS，并且通常，@ alex建议的方法很好地解决了这个问题。