是否有CSS父选择器？

如何选择作为锚元素的直接父元素的<li>元素？

例如，我的CSS应该是这样的：

li < a.active {
    property: value;
}

很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。

我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。

当前回答

只是一个水平菜单的想法。。。

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新的演示和其余代码

另一个示例是如何将其用于文本输入-选择父字段集

2015-10-27 17:55:16

其他回答

没有父选择器；就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您写道：

body:contains-selector(a.active) { background: red; }

然后，浏览器必须等到加载并解析完所有内容，直到</body>确定页面是否应为红色。

《为什么我们没有父选择器》一文详细解释了这一点。

2014-01-21 08:43:47

现在是2019年，CSS嵌套模块的最新草稿实际上有这样的内容。介绍@nest at规则。

3.2.嵌套规则：@nest虽然直接筑巢看起来不错，但它有点脆弱。某些有效的嵌套选择器（如.foo&）是不允许的，以某些方式编辑选择器可能会使规则意外无效。此外，一些人发现嵌套很难从视觉上与周围的声明区分开来。为了解决所有这些问题，本规范定义了@nest规则，它对如何有效地嵌套样式规则施加了较少的限制。其语法为：@nest＝@nest＜选择器＞｛＜声明列表＞｝@nest规则的功能与样式规则相同：它以选择器开始，并包含应用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须是嵌套的，这意味着它在某个地方包含嵌套选择器。如果选择器的所有单个复杂选择器都包含嵌套，则选择器列表包含嵌套。

（从上面的URL复制并粘贴）。

本规范下的有效选择器示例：

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

2019-03-19 14:14:57

我知道OP正在寻找CSS解决方案，但使用jQuery很容易实现。在我的例子中，我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有：has选择器，因此可以通过它包含的子项来标识父项：