这里有一个fiddle,我有两个div,一个是外部盒子,另一个是
innerBox
。当单击innerBox
时,我需要更改外部box
的属性。
由于CSS3无法实现该功能,所以在CSS4中是否有任何可用选项?innerBox
。当单击innerBox
时,我需要更改外部box
的属性。
由于CSS3无法实现该功能,所以在CSS4中是否有任何可用选项?可能并没有CSS4这样的东西,但确实存在“选择器级别4”。这是下一代选择器的未完成规范,并在规范中包括父级选择器。或者更准确地说,是“主题”选择器。
规范文件在此处:http://dev.w3.org/csswg/selectors/
但请注意,这是一个dev网址,规范仍然是正在进行中的工作。
在实际代码中,主题选择器可能看起来像这样:
div > !.foo > span
这将选择一个具有class为foo
的元素,它是
span
作为子元素。但正如我所说,这不是一个完整的规范(实际上,在该过程中,主题选择器的语法已经多次更改,并且仍可能随时遭受进一步的更改)。此外,它在任何浏览器中都没有实现,也没有预期它会在不久的将来得到实现。
此外,即使/当选择器4级在浏览器中得到实现,规范明确说明由于性能原因可以省略一些选择器(它们区分“快速”选择器和“完整”的选择器集)。主题选择器是其中之一:如果规范保持不变,则浏览器对将其添加到CSS中没有任何强制性要求。在这种情况下,他们可能会将其添加到Javascript中,例如用于document.querySelector()
等方法,但不会添加到CSS本身。这并不能真正帮助您,因为已经可以通过javascript找到父元素了。(请参见上面链接的规范中的第2.1节了解更多信息)。
所以简短的答案是:不,不可能。将来可能有可能,但这并不能帮助您,即使在将来也可能存在致命缺陷。
(您还可以阅读这篇文章,它比实际规范更适合普通用户。但请注意,自此文写作以来,主题选择器语法已发生更改)
还有:使用父级选择器很容易意外地导致整个文档的搜索。人们可以而且会误用这个选择器。支持它就是给人们提供了足够的绳子去绞死自己。
但你可以轻松地使用JS甚至使用jQuery来实现。只需在jQuery中调用我所描述的并不是技术上不可能的。事实上,恰恰相反。这只是意味着我们必须处理使用这种功能的性能影响。
$('a').parent();
即可获取<a>
标签的父级。
来源
CSS选择器4最初打算实现此功能,但目前计划仅在JavaScript DOM中实现它,而不是作为CSS选择器,因为它“速度慢”。