是否有CSS父选择器？

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

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

li < a.active {
    property: value;
}

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

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

当前回答

虽然目前标准CSS中没有父选择器，但我正在开发一个名为axe（即增强的CSS选择器语法/ACSSSS）的（个人）项目，该项目在其7个新选择器中包括：

一个直接的父选择器<（它允许相反的选择>）任意祖先选择器^（启用与[SPACE]相反的选择）

axe目前处于相对早期的BETA开发阶段。

请在此处查看演示：

.父级{浮动：左侧；宽度：180px；高度：180px；右边距：12px；背景色：rgb（191191191）；}.儿童{宽度：90px；高度：90px；边距：45px；填充顶部：12px；字体系列：无衬线；文本对齐：居中；字体大小：12px；背景色：rgb（255，255，0）；}child.using-axe<父级{背景色：rgb（255，0，0）；}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里，axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

在上面的示例中，<是直接父选择器，因此

child.using-axe<父级

指：

.child.uning-axe的任何直接父级，即parent

您也可以使用：

.child.using-axe<div

这意味着：

child.using-axe的任何直接父级，它是一个div

2017-02-18 17:06:00

其他回答

W3C排除了这种选择器，因为它会对浏览器产生巨大的性能影响。

2011-08-16 04:43:30

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

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

在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:

li.active > a {
    property: value;
}

2009-06-18 20:06:44

您可以使用以下脚本：

*! > input[type=text] { background: #000; }

这将选择文本输入的任何父级。但等等，还有很多。如果需要，可以选择指定的父级：

.input-wrap! > input[type=text] { background: #000; }

或在它处于活动状态时选择它：

.input-wrap! > input[type=text]:focus { background: #000; }

查看此HTML：

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

当输入激活时，您可以选择该span.help并显示：

.input-wrap! .help > input[type=text]:focus { display: block; }

还有更多的功能；只需查看插件的文档即可。

顺便说一下，它在Internet Explorer中工作。

2011-08-13 10:13:50