CSS选择器可以参考其它选择属性?(Can a CSS selector reference ano

2019-06-25 13:43发布

我刚刚注意到的Webkit现在有关于一些支持CSS值和单位模块级别的规格。 我想知道如果任何人知道,如果有引用另一个CSS选择器(或DOM风格)财产CSS选择器的方法吗?

我期待像这样在这里得到答案。 这是我所知道的是最有可能对目前的浏览器实现的情况; 但请继续阅读...

例如,在一个动画可能会调整一个元素的情况下( 注意 ${.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的宽度进行重新评估。

我认识到,上述规范。 只有一个工作草案,但也许对于参照这样的“参考选择属性”其他规范内定义的语法。 这我还没有发现? 或者干脆只是不足为虑的情况下(由于被忽视的解决办法)?

在此先感谢您抽出宝贵的时间来更不用说阅读回答问题。

Answer 1:

我添加了一个答案,你链接的问题: https://stackoverflow.com/a/11071806/137626

  • 您可以与尽可能多的选择,你想将它们分组(选择用逗号隔开)使用相同的声明块
  • 你不能后来与其他CSS选择器而无需重写此之前选择整个声明块或使用预处理器/宏会为你做重复使用相同的声明块。 或者如上面添加到现有的声明块

现在,你通过CSS本身调整的元素的例子:你可以使用CSS3媒体查询@media规则,只要你想包含多达声明块。 这些媒体查询将适应视口的宽度在这里。
通过混合动画和媒体查询扩展元素会一直相反的效果将很快很复杂(我不知道你有玩什么内容); 如果你想保持它的简单,那么JS是要走的路。 有变量,循环事件;),你可以从一个元素(或任何CSS选择器)添加或删除单个类开始CSS3动画。
CSS3不会取代JS(和JS没有被激活的或现有的无处不在,并且已经有一个不错的后备命名为CSS,你不应该用JS风格HTML)。



Answer 2:

除了使用了预编译,如青菜/ SCSS或更少 ,我相信所有你能做的就是等待或硬编码。



文章来源: Can a CSS selector reference another selectors property?