CSS选择祖先的替代方法是啥

Posted 2023-03-06

【中文标题】CSS选择祖先的替代方法是啥

【英文标题】：What is the alternative to CSS-selecting an ancestorCSS选择祖先的替代方法是什么

【发布时间】：2013-05-08 18:06:56

【问题描述】：

CSS(3) 有后代选择器，例如td em color: red;，但显然是no ancestor selector。

那么，我应该怎么做而不是像 td border: 1pt solid red em; 这样的东西？即，如何在某些 (X)html 元素的祖先上设置样式？

注意：

javascript 与解决方法无关，可能是 XPath'y。

【问题讨论】：

据我了解，如果td 包含em，那么您想在其上设置border。仅通过 css 是不可能的。您是否对“解决方法”（如您标记的）中的 javascript/JQuery 解决方案持开放态度？如果是这样，那么有一个解决方案。

***.com/questions/1251768/… 的副本。

【参考方案1】：

你可以等待 CSS4 选择器实现，然后再做

td! em 
    border: 1pt solid red;

见http://dev.w3.org/csswg/selectors4/。

或者……

var xpathresult = document.evaluate("//td[.//em]", 
    document, null, XPathResult.ANY_TYPE, null); 
while (e=xpathresult.iterateNext())
    e.classList.add("border");

见https://developer.mozilla.org/en-US/docs/DOM/document.evaluate。普通浏览器支持警告适用。

【讨论】：

带有感叹号td的元素是规则适用的元素，而不是选择器em最右边的元素。只是不要屏住呼吸寻求支持:)