CSS 选择器可以“继承”另一个选择器的所有声明吗？ [复制]答案

【问题标题】：Can a CSS selector "inherit" all declarations from another selector? [duplicate]CSS 选择器可以“继承”另一个选择器的所有声明吗？ [复制]
【发布时间】：2014-03-28 04:11:21
【问题描述】：

有什么办法吗

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

例如，假设我有一些简单的 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 */
}

我意识到如果我可以访问底层代码，我可以通过将“tilt”类添加到 img 标签来简单地做到这一点，但我没有。我也知道我可以在运行时使用 javascript 将倾斜类添加到 img 标签，但我只能更改 CSS。

基本上，我想通过不必在 CSS 文件中一遍又一遍地重复这些声明来节省代码。有没有办法做到这一点？同样，我只能访问 CSS 文件，没有其他权限。

【问题讨论】：

如果我理解您真正想要做什么，那么您所说的实际继承或嵌套（不仅仅是分组）对于纯 CSS 是不可能的。人们经常使用 CSS preprocessor 如 LESS 或 SASS 来帮助解决此问题。
对 CSS 的又一次打击。一个人与 dom 对抗，用“！important”之类的愚蠢的小陷阱来覆盖继承，试图在这个地方破坏东西，但你不能在 css 中指定继承。

标签： css

【解决方案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 预处理器，否则您实际上无法使用您所描述的语法。

【讨论】：

【解决方案2】：

是的，这可以通过 CSS 中的分组来实现，如下所示：

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

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

【讨论】：

请参阅stackoverflow.com/editing-help 获取有关格式化代码的帮助。

【解决方案3】：

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

关于似乎是预期的问题（与提出的问题相反），它是关于组织您的标记和 CSS，而且@alex 建议的方法通常可以很好地解决问题。

【讨论】：