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 解决方案持开放态度？如果是这样，那么有一个解决方案。
stackoverflow.com/questions/1251768/… 的副本。

标签： css css-selectors

【解决方案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最右边的元素。只是不要屏住呼吸寻求支持:)