CSS选择器可以引用其他选择器属性吗? [英] Can a CSS selector reference another selectors property?

问题描述

我刚刚注意到Webkit现在对 CSS值和单位模块级别规范.我想知道是否有人可以从CSS选择器中引用另一个CSS选择器(或DOM样式)属性?

I've just noticed that Webkit now has some support regarding the CSS Values and Units Module Level spec. And I was wondering if anyone knows if there is a way to reference another CSS selectors (or DOM style) property from a CSS selector?

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

I'm expecting something like this to be the answer here. Which I know is most likely the case for current browser implementations; but please keep reading...

例如，在动画可能调整元素大小的情况下(注意，${.element2.width}是虚拟语法):

For instance, in the case where an animation might resize an element (NOTE the ${.element2.width} is fictitious syntax):

<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的宽度.

In this case I would expect the .element1's width to be re-evaluated based off the transition triggered from the hover events on .element2.

我意识到上述规格.只是一个工作草案，但也许在另一个规范中定义了引用这种引用选择器属性"的语法.我还没有发现?还是根本就不用担心(由于周围的工作被忽略了)?

I realize that the aforementioned spec. is only a working draft but perhaps the syntax for referring to such a 'referential selector property' is defined within another spec. which I'm yet to discover? Or simply just not a case for concern (thanks to an overlooked work around)?

预先感谢您抽出宝贵的时间阅读，更不用说回答问题了.

Thanks in advance for taking the time to read let alone answer the question.

推荐答案

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

I added an answer to the question you linked: https://stackoverflow.com/a/11071806/137626

• 您可以将同一声明块与任意数量的选择器组合使用(选择器以逗号分隔)
• 您不能在以后使用其他CSS选择器重用同一声明块，而无需重写此选择器之前的整个声明块或使用将为您完成此操作的预处理器/宏.或如上所述将其添加到现有的声明块中

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

Now with your example of an element resized by CSS itself: you could use CSS3 Media Queries and its @media rules containing as many declaration blocks as you want. These media queries would adapt to the width of viewport here.
Mixing expanding elements via animation and media queries that would've the reverse effect will be very soon very complicated (and I'll wonder what content you're playing with); if you want to Keep It Simple, then JS is the way to go. There are variables, loops, events ;) and you can start a CSS3 animation by adding or removing a single class from an element (or whatever CSS selector).
CSS3 won't replace JS (and you shouldn't use JS to style HTML as JS isn't activated or existing everywhere and there's already a nice fallback named CSS).

这篇关于CSS选择器可以引用其他选择器属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！