CSS选择器可以“继承”来自另一个选择器的所有声明？ [英] Can a CSS selector "inherit" all declarations from another selector?

问题描述

有任何方法可以让

一个CSS选择器继承另一个选择器的所有声明？

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

  .tilt {
 -webkit-transition：all 0.5s缓解; 
 -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 {
 / *继承自.tilt * / 
} 
 
 body.home.page .box-2 figure img：hover {
 / *继承自.tilt：hover * / 
} 
  pre> 
 
 
我意识到，如果我能够访问底层代码，我可以通过向img标签添加tilt类，但我不能。我也知道我可以使用javascript来添加倾斜类到img标签在运行时，但我可以访问更改是CSS。
 
 
 
基本上，我想通过不必在CSS文件中重复这些声明来保存代码。有什么办法吗？再次，我只能访问CSS文件，没有其他。
解决方案
可以使用多个选择器。用逗号分隔它们。
  .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预处理器。
 
Is there any way to have 

a CSS selector "inherit" all declarations from another selector?

For example, imagine I have some simple img transformation rules:
.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);
}
Is there any way to do the following?
body.home.page .box-2 figure img {
    /* inherit from .tilt */
}

body.home.page .box-2 figure img:hover {
    /* inherit from .tilt:hover */
}
I realize that I could do this simply by adding the "tilt" class to the img tag if I had access to the underlying code, but I don't. I also know I could use javascript to add the tilt class to the img tag at runtime, but all I have access to change is the CSS.

Basically, I want to conserve code by not having to repeat these declarations over and over again in the CSS file. Is there any way to do this? Again, I only have access to the CSS file, nothing else.
解决方案
You could use multiple selectors. Separate them with a comma.
.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;
}
You can't actually use syntax like you described, unless you use a CSS pre-processor.

                        
这篇关于CSS选择器可以“继承”来自另一个选择器的所有声明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！