CSS 选择器可以引用另一个选择器属性吗？答案

【问题标题】：Can a CSS selector reference another selectors property?CSS 选择器可以引用另一个选择器属性吗？
【发布时间】：2012-06-19 18:20:22
【问题描述】：

我刚刚注意到 Webkit 现在对 CSS Values and Units Module Level 规范有一些支持。我想知道是否有人知道是否有办法从 CSS 选择器中引用另一个 CSS 选择器（或 DOM 样式）属性？

我期待this 之类的东西成为这里的答案。我知道这很可能是当前浏览器实现的情况；但请继续阅读...

例如，在动画可能会调整元素大小的情况下（注意 ${.element2.width} 是虚构的语法）：

<style type="text/css">
.element1 {
  .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width});
}
.element2 {
  .width: 100px;
}
.element2:hover {
  width: 200px;
  transition: all 0.4s ease-in-out;
}
</style>

在这种情况下，我希望根据 .element2 上的悬停事件触发的过渡重新评估 .element1 的宽度。

我意识到上述规范。只是一个工作草案，但可能引用这种“引用选择器属性”的语法在另一个规范中定义。我还没有发现？或者根本不用担心（多亏了一个被忽视的解决方法）？

【问题讨论】：

没有。 ...使用 SASS、LESS 或 Stylus（谷歌是你的朋友）
不，这不是 CSS 选择器的工作方式，calc() 不太可能支持在级联中引用另一个属性，更不用说在完全不同的规则中引用另一个属性了。

标签： css css-selectors

【解决方案1】：

我为您链接的问题添加了答案：https://stackoverflow.com/a/11071806/137626

您可以将同一声明块与任意数量的选择器组合使用（选择器用逗号分隔）
如果不重写此选择器前面的整个声明块或使用将为您执行此操作的预处理器/宏，您将无法在以后使用不同的 CSS 选择器重用相同的声明块。或者将其添加到上面的现有声明块中

现在以 CSS 本身调整元素大小的示例为例：您可以使用 CSS3 Media Queries 及其包含任意数量声明块的 @media 规则。这些媒体查询将适应此处的视口宽度。
通过动画和媒体查询混合扩展元素会产生相反的效果，很快就会非常复杂（我想知道你在玩什么内容）；如果你想保持简单，那么 JS 是要走的路。有变量、循环、事件；）您可以通过在元素（或任何 CSS 选择器）中添加或删除单个类来启动 CSS3 动画。
CSS3 不会取代 JS（而且你不应该使用 JS 来设置 HTML 样式，因为 JS 没有被激活或存在于任何地方，并且已经有一个很好的后备名为 CSS）。

【讨论】：

感谢您的回复，这是迄今为止最知情的。我认为你用 javascript 解决这个问题是正确的，因为它不会引起上述并发症。

【解决方案2】：

除了使用诸如sass/scss 或less 之类的预编译器之外，我相信您所能做的就是等待或硬编码。

【讨论】：

我希望这不是答案，但看起来你是绝对正确的，通过 less/sass 或其他 css 语法抽象使用“已实现”的静态预计算变量来伪造它.或者正如你所说的那样优雅。等等;)