Question

有没有办法声明一个CSS声明，该声明以id为目标的父元素？

例如，我知道我的元素的ID，“element1”，但我不知道它的父元素。我想声明CSS信息来定位myDiv，但我不知道它的ID。

HTML：

<div id="myDiv">  
   <div id="element1"> hello </div>
</div>

CSS：

#element1(parent) {
   border:1px solid red;
}

Answer 1

不，现在没有。很长一段时间以来，WHATWG小组都在讨论这个问题，但直到一两年前，浏览器供应商拒绝支持任何针对此类选择器的提议，因为它会因为方式而过慢地降低CSS规则匹配的速度。 DOM被解析。

随着DOM解析器引擎的进步，它目前被认为是来自浏览器供应商端的可能，因此现在有一个提议包括某种类型的目标选择器CSS4，甚至语法仍然存在争议。目前，没有任何浏览器支持任何提议的符号，也没有其中任何一个在内部准备好支持这样的功能。

The current CSS4 Selectors draft提到了主题说明符，但是现在甚至包含一个明确的说明，如果此提案成立，!是否应该被添加或附加到选择器，或者甚至应该有2个选择器。

Answer 2

如果您不仅限于css：

，您可以使用jquery执行此操作

$(document).ready(function(){
    $("#element1").closest("div").css({"({"border":"1px solid red"});
});

对于多个父母使用parents（）和最近的一个使用nearest（）。 Closest（）非常棒，因为它只会触发与您选择匹配的第一个父级。

Answer 3

如果您知道父元素，那么它就是div：

div > #element1{
    border:1px solid red;
}

但如果你不知道你的元素的父标记是什么标记，请在使用此代码之前先阅读整个标记：

* > #element1{
    border:1px solid red;
}

这读作：所有元素是id为'myDiv'的元素的直接后代（只能是一个）。

有一些浏览器兼容性问题，但根据this post，该人说它兼容IE 7，IE8，IE9 pr3，FF 3.0，FF 3.5，FF 3.6，FF 4b1，Saf 4.0 Win， Saf 5.0 Win，Chrome 4，Chrome 5，Opera 10.10，Opera 10.53和Opera 10.60。

但关于此代码的非常糟糕的事情是它可能会带来性能问题（虽然我没有测试）因为你强迫浏览器浏览页面的所有元素（可以是广泛的。）

现在，如果你想成为一名优秀的css编码器并避免这些，你应该反思，就像其他人一样，例如，将类或id应用于父元素。如果你无法访问它们，那么检查是否可以在你的结构中插入一个新的div包装你的＃element1元素并成为该元素的父元素，甚至使用javascript。

Answer 4

不是香草css。您可以尝试scss，less或其他一些动态css生成语言。

您需要嵌套声明和父选择器支持。

以下示例适用于 scss 和 less ：

#element1 {
  #myDiv & { border: 1px solid red; }
}

一些参考文献：

有没有办法设置元素父级的CSS？

4 个答案: