提问



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


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


li < a.active {
    property: value;
}


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


我尝试设置样式的菜单正在由CMS发出,所以我不能将Activity元素移动到<li>元素...(除非我主题菜单创建模块,我宁愿不做)。


有任何想法吗?

最佳参考


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


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



  • 选择器等级3规格

  • CSS 2.1选择器规范



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





选择器级别4工作草案包括:has()伪类,其作用与jQuery实现相同。自2018年起,仍然不支持任何浏览器[82] [83] [84]


使用:has()可以用以下方法解决原始问题:


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

其它参考1


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


但是,由于你似乎已经有.active类,将该类移到li(而不是a)会不会更容易?这样你只能通过css访问lia

其它参考2


您可以使用此脚本。 [85]


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


这将选择文本输入的任何父级。但是等等,还有更多。如果你愿意,你可以选择一个指定的父:


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


或者在它处于Activity状态时选择它:


.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>


您可以在input处于Activity状态时选择span.help并显示它:


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


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


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

其它参考3


正如其他几个人所提到的那样,没有一种方法可以使用CSS来设置元素的父/,但以下是使用jQuery:[86]


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

其它参考4


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


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


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


这篇文章为什么我们没有父选择器详细解释它。[87]

其它参考5


没有办法在css2中执行此操作。您可以将类添加到li并引用a


li.active > a {
    property: value;
}

其它参考6


CSS选择器General Sibling Combinator可以用于你想要的东西:[88]


E ~ F {
    property: value;
}


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

其它参考7


尝试将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: ...
}

其它参考8


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

其它参考9


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


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


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


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

其它参考10


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


例如:


body! a:hover{
   background: red;
}


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


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

其它参考11


您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。喜欢这个:


a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}


这样,您可以根据父元素的翻转更改多个内部标记中的样式。

其它参考12


目前没有父选择器&它甚至没有在W3C的任何谈话中讨论过。您需要了解浏览器如何评估CSS以实际了解我们是否需要它。


这里有很多技术解释。


Jonathan Snook解释了如何评估CSS。[89]


Chris Coyier关于父选择器的谈话。[90]


Harry Roberts再次编写高效的CSS选择器。[91]


但妮可沙利文对积极趋势有一些有趣的事实。[92]


这些人都是前端开发领域的顶级人物。

其它参考13


有人提出这样的建议吗?只是水平菜单的想法......


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%; }


更新了演示和其余代码[93]


如何将其与文本输入一起使用的另一个例子 - 选择父字段集[94]

其它参考14


是的::has() [95]


浏览器支持:无[96]

其它参考15


伪元素:focus-within允许在后代具有焦点时选择父元素。


如果元素具有tabindex属性,则可以对其进行聚焦。


浏览器支持焦点[97]


TABINDEX [98]


示例




.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}

<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>



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

其它参考16


从技术上讲,没有直接的方法可以做到这一点,你可以用jquery或javascript对它进行排序。


不过,你也可以这样做。


a.active h1 {color:blue;}
a.active p {color: green;}


的jQuery


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


如果你想使用jQuery实现这一点,这里是jQuery父选择器的引用[99]

其它参考17


有一个插件可以扩展CSS以包含一些在设计网站时真正有用的非标准功能。它被称为EQCSS。[100]


EQCSS添加的一个东西是父选择器。它适用于IE8及更高版本的所有浏览器。这是格式:


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


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


这里有一个$parent和另一个$parent演示的演示,可以在IE8中运行,以及一个屏幕截图,以防你没有IE8来测试。[101] [102]]] [103]


EQCSS还包括元选择器$prev,用于选定元素之前的元素,$this仅用于那些与元素查询匹配的元素,等等。[104]

其它参考18


简短的回答是 NO ,我们在CSS的这个阶段没有parent selector,但如果你没有交换元素或类,第二个选项是使用JavaScript ,像这样:


var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});


或者在您的应用程序中使用 jQuery 的更短的方法:


$('a.active').parents('li').css('color', 'red'); //your property: value;

其它参考19


虽然目前标准CSS中没有父选择器,但我正在开发一个名为 ax 的(个人)项目(即增强型CSS选择器语法/ACSSSS ),其中它的7个新选择器包括:



  1. 一个直接父选择器<(启用相反的选择>)

  2. 一个任何祖先选择器 ^(启用相反的选择[SPACE])



ax 目前处于相对较早的BETA发展阶段。


在这里看一个演示:


http://rounin.co.uk/projects/axe/axe2.html[105]


(比较左边的两个列表用标准选择器设置,右边的两个列表用斧头选择器设置)

其它参考20


不,你不能只在css中选择父。


但是,由于你似乎已经有.active类,将该类移动到li(而不是a)会不会更容易?这样你只能通过css访问lia

其它参考21


在SASS中使用&符号是可能的:


h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px


CSS输出:


h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

其它参考22


至少包括CSS3在内,你不能选择那样的CSS3。
但是现在可以很容易地在JS中完成,你只需要添加一些vanilla JavaScript,注意代码很短。




      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });

            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>



a ~ li {
    background: red
}


在css3中添加了新的选择器,所以如果html看起来像这样:


<ul>
  <li>
    <a>Some text</a>
  </li>
</ul>


你实际上能够影响a元素的父元素,这是li

其它参考23


这是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中,我们可以在层次结构中级联到属性,但不能在相反方向上级联。
要修改子事件的父样式,可能使用jQuery。


$el.closest('.parent').css('prop','value');