9

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

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

例如，在动画可能调整元素大小的情况下（注意这${.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 的宽度。

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

4

2 回答 2

2

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

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

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

于 2012-06-17T14:31:48.450 回答
1

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

于 2012-06-17T14:17:57.013 回答