CSS选择器可以引用另一个选择器属性吗?

Ben*_*lan 8 css css-selectors

我刚刚注意到Webkit现在对CSS值和单位模块级规范有一些支持.我想知道是否有人知道是否有办法从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>
Run Code Online (Sandbox Code Playgroud)

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

我意识到前面提到的规范.只是一个工作草案,但也许在另一个规范中定义了引用这种"引用选择器属性"的语法.我还没发现什么?或者只是不是一个值得关注的案例(感谢被忽视的工作)?

提前感谢您花时间阅读,更不用说回答问题了.

Fel*_*Als 2

我添加了您链接的问题的答案:/sf/answers/775026451/

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

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