题 有一个CSS父选择器吗?


我该如何选择 <li> 元素是锚元素的直接父元素?

在示例中,我的CSS将是这样的:

li < a.active {
    property: value;
}

显然有一些方法可以使用JavaScript来实现这一点,但我希望CSS Level 2本身存在某种解决方法。

我尝试设置样式的菜单正在由CMS喷出,因此我无法将活动元素移动到 <li> 元素...(除非我主题菜单创建模块,我宁愿不这样做)。

有任何想法吗?


2516
2018-06-18 19:59


起源


我实际上并没有借用jquery文档,而只是试图说明我想要选择的元素。您的建议将选择所有li标签的子项(请参阅 w3.org/TR/CSS2/selector.html) - jcuenod
更多关于这个问题的讨论 stackoverflow.com/questions/45004/... - MatrixFrog
@Tomas li> a.active选择孩子,而不是父母。 - Stewart
有趣的是注意到问题@MatrixFrog链接到这个页面“这个问题已经有答案”... - Agi Hammerthief
这个问题有更新吗?我相信这个问题上最后一次记录的信件是在2014年3月。这是怎么回事? - Master Yoda


答案:


目前无法在CSS中选择元素的父级。

如果有办法,它将在当前CSS选择器规范中的任何一个:

与此同时,如果您需要选择父元素,则必须使用JavaScript。


选择者4级工作草案 包括一个 :has() 与类相同的伪类 jQuery实现。截至2018年, 任何浏览器仍然不支持此功能

运用 :has() 原来的问题可以用这个来解决:

li:has(> a.active) { /* styles to apply to the li tag */ }

2013
2018-06-18 20:16



它似乎已被建议和拒绝: stackoverflow.com/questions/45004/... - RobM
看起来像 主题选择器 已被重访,除非使用 ! 现在: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson♦
前置 $ 对我来说看起来更好......附加 ! 可以更容易地被忽视。 - Christoph
主要情节扭曲! Selectors 4 WD刚刚更新 今天 从快速配置文件中排除主题指示符,CSS实现将使用该指示符。如果此更改仍然存在,则表示您将无法再使用样式表中的主题指示器(除非您使用添加某种类似于 另一个答案) - 您只能将它与Selectors API一起使用,并且可以在任何其他可以实现完整配置文件的地方使用它。 - BoltClock♦
另一个重大更新:看起来他们正在考虑完全取消主题选择器语法并将其替换为 :has() 伪大家都是从jQuery那里了解和喜爱的。最新的ED删除了对主题指标的所有引用,并将其替换为 :has()伪。我不知道具体原因,但CSSWG不久前举行了一次民意调查,结果肯定会影响这一决定。它最有可能与jQuery兼容(因此它可以在没有修改的情况下利用qSA),并且因为主题指示器语法被证明太混乱了。 - BoltClock♦


我认为你不能只选择css中的父级。

但是你似乎已经有了 .active 上课,将那个班级移到后面会不会更容易 li (而不是 a)?这样你就可以访问了 li 和 a 仅通过css。


120
2018-06-18 20:08



您不能将伪选择器移动到列表项,因为它不是可聚焦元素。他正在使用:active选择器,因此当锚点处于活动状态时,他希望列表项受到影响。列表项永远不会处于活动状态。顺便说一句,不幸的是,这样的选择器不存在。如果没有它,使得纯CSS菜单可以完全通过键盘访问似乎是不可能的(使用兄弟选择器可以使用嵌套列表创建子菜单,但是一旦列表获得焦点,它就会再次隐藏)。如果这个特定的conun有任何只有CSS的解决方案
@Dominic Aquilina看看这个问题,OP正在使用一个类,而不是一个伪选择器。 - jeroen


你可以用它 脚本

*! > 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 是活跃的并显示它:

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

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

顺便说一下,它适用于IE。


100
2017-08-13 10:13



假设使用jquery patent() 会更快。然而,这需要测试 - Dan
@Idered当你没有子选择器的Selector Subject的CSS声明时失败(#a! 单独抛出一个错误, #a! p 工作),因此其他人将无法工作 Uncaught TypeError: Cannot call method 'split' of undefined:看 jsfiddle.net/HerrSerker/VkVPs - HerrSerker
@HerrSerker我认为#a!是一个无效的选择器,它应该选择什么? - Idered
@Idered我不知道。该规范并未说明它是非法的。 #一个!应该选择自己。至少他们应该在JavaScript中没有错误 - HerrSerker
根据我对已接受答案的评论,看起来即使在不久的将来也可能需要填充,因为主题指示器可能永远不会被CSS中的浏览器实现。 - BoltClock♦


正如其他几个人所提到的那样,没有办法只使用CSS来设置元素的父/的样式,但以下工作原理 jQuery的

$("a.active").parents('li').css("property", "value");

75
2017-12-14 14:51



该 < 选择器不存在(使用jQuery 1.7.1验证)。 - Rob W
或许那样 <-syntax在2009年工作,但我已经更新了(2013年)。 - Alastair
更好的是,使用jQuery的内置功能 :has() 选择: $("li:has(a.active)").css("property", "value");。它的内容类似于CSS 4的提议 ! 选择。也可以看看: :parent 选择, .parents() 方法, .parent() 方法。 - Rory O'Kane
而不是使用 .css("property", "value") 通常应该为所选元素设置样式 .addClass("someClass") 并拥有你的CSS .someClass { property: value } (通过)。这样,您可以使用CSS的全部功能和您正在使用的任何预处理器来标记样式。 - Rory O'Kane


没有父选择器;只是没有以前的兄弟选择器的方式。没有这些选择器的一个很好的理由是因为浏览器必须遍历元素的所有子元素以确定是否应该应用类。例如,如果您写道:

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

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

本文 为什么我们没有父选择器 详细解释。


44
2018-01-21 08:43



所以让浏览器更快。互联网本身更快。这个选择器肯定是必需的,遗憾的是,没有实现它的原因是因为我们生活在一个缓慢的,原始的世界中。 - vsync
实际上,选择器会使浏览器看起来很慢。 - Salman A
我相信浏览器开发人员会提出一个实现(至少)与javascript版本一样快,这是最终使用的人。 - Marc.2377


在css2中没有办法做到这一点。你可以将类添加到li并引用a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



通过制作一个元素显示:块你可以设置它以适应整个li区域。如果你能解释一下你正在寻找什么样的风格,或许我可以帮助解决问题。 - Josh
这实际上是一个简单而优雅的解决方案,在许多情况下,在父级上设置类是有意义的。 - Ricardo


CSS选择器“General Sibling Combinator“也许可以用于你想要的东西:

E ~ F {
    property: value;
}

这匹配任何 F 以...开头的元素 E 元件。


26
2018-06-30 14:00



这不是正确答案,但感谢您提醒我们这个选择器 - Dan
这只是兄弟选择器,它不是孩子,父母......不是真的回答问题伙伴 - Alireza


尝试切换 a 至 block 显示,然后使用您想要的任何样式。 a元素将填补 li 元素,您将能够根据需要修改它的外观。别忘了设置 li 填充为0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03





据我所知,不是在CSS 2中。 CSS 3具有更强大的选择器,但并非在所有浏览器中始终如一地实现。即使使用改进的选择器,我也不相信它会完全符合您在示例中指定的内容。


19
2018-06-18 20:09





我知道OP正在寻找一个CSS解决方案但是使用jQuery很容易实现。在我的情况下,我需要找到 <ul> 父标签 <span> 包含在孩子身上的标签 <li>。 jQuery有 :has 选择器因此可以通过它包含的子节点识别父节点:

$("ul:has(#someId)")

会选择 ul 具有id的子元素的元素 someId。或者回答原始问题,类似下面的内容应该可以做到(未经测试):

$("li:has(.active)")

17
2018-05-16 22:04



或者使用 $yourSpan.closest("ul") 并且您将获得span元素的父UL。然而,你的答案完全是offtopic imho。我们可以使用jQuery解决方案回答所有CSS-taged问题。 - Robin van Baalen
正如在其他答案中所确定的那样,使用CSS 2无法做到这一点。鉴于这种约束,我提供的答案是我知道的有效,并且是使用javascript imho回答问题的最简单方法。 - David Clarke
鉴于你的赞成,有些人同意你的看法。但唯一的答案仍然是被接受的答案;简单而简单的“它不能以你想要的方式完成”。如果问题是如何在自行车上达到60英里每小时的速度并且你用“简单的方式进入车内并击中气体”来回答它,那么它仍然不是一个答案。因此我的评论。 - Robin van Baalen
这种方法会使SO几乎完全没用。我搜索SO如何解决问题,而不是找到“唯一的答案”没有解决问题。这就是为什么SO太棒了,因为总有不止一种方法可以给猫皮肤。 - David Clarke


这是讨论最多的方面 选择者等级4 规范。 使用此选择器将能够通过在给定选择器(!)后使用感叹号根据其子项设置元素的样式。

例如:

body! a:hover{
   background: red;
}

如果用户将鼠标悬停在任何锚点上,则会设置红色背景颜色。

但是我们必须等待浏览器实现:(


15
2018-05-05 18:24



可悲的是,但现在这个功能已超出规格,因为我知道...... - Qwertiy