如何选择作为锚点元素的直接父级的 <li>
元素?
例如,我的 CSS 如下:
li < a.active {
property: value;
}
很明显可以用JavaScript做到这一点,但我希望存在CSS Level 2本身的解决方法。
我正在尝试样式化的菜单是由CMS生成的,所以我不能将活动元素移动到<li>
元素中...(除非我主题化菜单创建模块,但我宁愿不这样做)。
如何选择作为锚点元素的直接父级的 <li>
元素?
例如,我的 CSS 如下:
li < a.active {
property: value;
}
很明显可以用JavaScript做到这一点,但我希望存在CSS Level 2本身的解决方法。
我正在尝试样式化的菜单是由CMS生成的,所以我不能将活动元素移动到<li>
元素中...(除非我主题化菜单创建模块,但我宁愿不这样做)。
在CSS选择器4规范中,CSS引入了一个新的选择器叫做:has()
,它终于让我们能够选择父元素了。这意味着我们将能够选择具有特定子元素的CSS元素。这已经在Safari中得到支持,并且也在Chrome 105中得到支持。完整的支持表在这里显示。
在CSS中,如果我们想选择某个元素,我们使用沿DOM下降的选择器。
例如,选择一个div标签内的p标签看起来像这样:
div p {
color: red;
}
标签的
子元素的
的
div:has(p) {
color: red;
}
的
就像任何其他CSS选择器一样,我们可以将其与特定情况相结合使用。 例如,如果您只想选择具有直接子元素的
div:has(> span) {
color: red;
}
:has
的词汇表达,它不仅仅局限于父级选择。div
的span
:span:has(+ div) {
color: red;
}
div:not(:has(p)) {
color: red;
}
CSS中一个非常常见的问题是:empty
标签不能选择包含任何文本的元素 - 所以有时候一个元素可能只包含一个空格,而:empty
不会生效。而:has
选择器给了我们选择只包含文本节点而没有其他子元素的元素的能力。
虽然这不是一个完美的解决方案来简单地选择只包含空格的:empty
元素(因为这将选择任何只有文本而没有其他HTML DOM元素的元素) - 但它确实给了我们选择只包含文本节点的DOM元素的能力,这是以前不可能的。我们可以通过以下代码实现:
div:not(:has(*)) {
background: green;
}
据我所知,在 CSS 2 中没有这个功能。虽然 CSS 3 拥有更强大的选择器,但并不是所有浏览器都能一致实现。即使使用了改进后的选择器,我也认为它不能完全满足您在示例中描述的要求。
body! a:hover{
background: red;
}
如果用户悬停在任何锚点上,将设置红色背景颜色。
但是我们必须等待浏览器的实现 :(
:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
通过这种方式,您可以根据父元素的鼠标悬停来更改多个内部标签的样式。
a
标签内的标记代码仅适用于某些元素,如果您想符合XHTML标准。例如,您不能在a
中使用div
,否则会收到违反模式的警告。 - Ivaylo Slavov<li>
中的 <span>
标签的 <ul>
父标签。jQuery 有 :has
选择器,因此可以通过其包含的子元素来识别父元素:$("ul:has(#someId)")
将选择具有带id为someId的子元素的ul
元素。或者回答最初的问题,类似以下内容的代码应该可以解决问题(未经测试):
$("li:has(.active)")
$yourSpan.closest("ul")
жқҘиҺ·еҸ–жӮЁзҡ„ span
е…ғзҙ зҡ„зҲ¶зә§ ul
гҖӮе°Ҫз®ЎеҰӮжӯӨпјҢжҲ‘и®ӨдёәжӮЁзҡ„еӣһзӯ”е®Ңе…ЁдёҺдё»йўҳж— е…ігҖӮжҲ‘们еҸҜд»ҘдҪҝз”Ё jQuery жқҘеӣһзӯ”жүҖжңүдёҺ CSS зӣёе…ізҡ„й—®йўҳгҖӮ - Robin van Baalen这是一个使用pointer-events
和hover
的小技巧:
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>
有一个插件扩展了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 用于测试。$prev
,对于仅匹配元素查询的元素,请使用 $this
,以及其他一些内容。当前没有父选择器,而且W3C的任何讨论中都没有提到它。您需要了解浏览器如何评估CSS才能确定我们是否需要它。
这里有很多技术解释。
Harry Roberts再次介绍了编写高效CSS选择器的方法.
但是Nicole Sullivan提供了一些有趣的正面趋势事实.
这些人在前端开发领域都是顶尖水平。
只是一个水平菜单的想法...
<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%; }
另一个例子如何将其与文本输入一起使用-选择父字段集
现在是2019年,CSS嵌套模块的最新草案实际上有类似于这样的东西。引入了@nest
at-rules。
3.2. 嵌套At-Rule:@nest
虽然直接嵌套看起来不错,但它有点脆弱。一些有效的嵌套选择器(比如.foo &)被禁止使用,并且以某种方式编辑选择器可能会意外地使规则无效。此外,有些人发现嵌套很难从周围的声明中区分出来。
为了解决所有这些问题,本规范定义了@nest规则,它对如何有效地嵌套样式规则施加了较少的限制。它的语法是:
@nest = @nest <selector> { <declaration-list> }
@nest规则与样式规则的功能相同:它以一个选择器开始,并包含应用于选择器匹配的元素的声明。唯一的区别是,在@nest规则中使用的选择器必须是包含嵌套的选择器,这意味着它在某个地方包含一个嵌套选择器。如果所有单独的复杂选择器都包含嵌套,则选择器列表是包含嵌套的。
(从上面的网址复制并粘贴)。
符合此规范的有效选择器示例:
.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; }
*/
:has()
选择器的实现。 - TylerHel.parenteElement.parenteElement...
一致的工作方式,比如a:active:parent:parent
或者甚至是a::active::parent::parent
,用两个分号。这不仅更符合现有伪类的逻辑,而且更易于使用和链接,以便在需要时向上多级。我真的希望有这种实现,因为我真的很讨厌使用:has(something)
:它既没有逻辑性,也没有直观性和人体工程学可用性。JavaScript 的方式更好,远胜于 :has()。 - willy wonka