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

例如,我的CSS应该是这样的:

li < a.active {
    property: value;
}

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

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


当前回答

至少包括CSS 3,你不能这样选择。但是现在用JavaScript可以很容易地完成,你只需要添加一些普通的JavaScript,注意代码很短。

cells=document.querySelectorAll('div');[].forEach.call(单元格,函数(el){//console.log(el.nodeName)如果(el.hasChildNodes()&&el.firstChild.nodeName==“A”){控制台日志(el)};});彼得</div><div><a href=“#”>Jackson链接</a></div>菲利普</div><div><a href=“#”>Pullman链接</a></div>

其他回答

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

基于子元素更改父元素当前只能在父元素中有<input>元素时发生。当输入获得焦点时,其对应的父元素可能会使用CSS受到影响。

以下示例将帮助您理解在CSS中使用:focus in。

.外部div{宽度:400px;高度:400px;填充:50px;浮动:左侧}.outer div:聚焦在{背景:红色;}.内部div{宽度:200px;高度:200px;浮动:左侧;背景:黄色;填充:50px;}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div(背景色)类。有可能吗?<input type=“text”placeholder=“Name”/></div></div>

有一个插件可以扩展CSS,以包含一些非标准功能,这些功能在设计网站时非常有用。这叫做EQCSS。

EQCSS添加的内容之一是父选择器。它适用于所有浏览器,Internet Explorer 8及更高版本。格式如下:

@element 'a.active' {
  $parent {
    background: red;
  }
}

因此,我们在每个元素a.active上打开了一个元素查询,对于该查询中的样式,类似$parent这样的东西是有意义的,因为有一个参考点。浏览器可以找到父节点,因为它与JavaScript中的parentNode非常相似。

这里有一个$parent的演示和另一个在Internet Explorer 8中运行的$parent演示,以及一个屏幕截图,以防您没有Internet Explorer 8进行测试。

EQCSS还包括元选择器:$prev用于所选元素之前的元素,$this仅用于与元素查询匹配的元素,等等。

如果子代具有焦点,则内的伪元素:focus允许选择父代。

如果元素具有tabindex属性,则可以聚焦该元素。

浏览器支持

标签索引

实例

.parent:焦点在{背景:hsl(199deg,65%,73%);}/*演示样式*/正文{边距:0;}.父级{背景:hsl(0,0%,80%);最小高度:100vh;显示:栅格;放置内容:中心;}.儿童{背景:hsl(0,0%,0%);颜色:白色;填充:3rem;大纲:0;光标:指针;字体:18px/1.25无衬线;宽度:20ch;}<div class=“parent”><div class=“child”tabindex=“1”>点击或关注我,我的父母会改变。</div></div>

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

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

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

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