有CSS父选择器吗?

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

如果有一种方法可以做到这一点,那么它将符合当前的CSS选择器规范:

• Selectors Level 3 Spec
• CSS 2.1 Selectors Spec

同时,如果需要选择父元素,则必须使用javascript。

这个 Selectors Level 4 Working Draft 包括一个 :has() 工作方式与 jQuery implementation . 截至2018, this is still not supported by any browser .

使用 :HASE() 原始问题可以通过以下方式解决:

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

我不认为您只能在CSS中选择父级。

但你已经有了 .active 类,将该类移动到 li (而不是 a )?这样就可以同时访问 锂 以及 一 仅通过CSS。

你可以用这个 script .

*! > 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中工作。

正如其他一些人所提到的,没有一种方法可以仅使用css来设置元素父级的样式,但是下面的方法适用于 jQuery :

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

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

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

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

本文 Why we don't have a parent selector 详细解释。

在CSS2中没有实现这一点的方法。您可以将类添加到li并引用a

li.active > a {
    property: value;
}

尝试切换 a 到 block 显示,然后使用所需的任何样式。 一 元素将填充 li 元素,您可以根据需要修改它的外观。别忘了设置 锂 填充到0。

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

CSS选择器__ General Sibling Combinator _可以用于您想要的用途:

E ~ F {
    property: value;
}

这和任何 F 前面有一个 E 元素。

据我所知,不在CSS 2中。CSS3有更强大的选择器,但并没有在所有浏览器中一致地实现。即使有了改进的选择器,我也不相信它能完全完成您在示例中指定的任务。

对: :has()

浏览器支持: none

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

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

将选择 ul 具有ID为的子元素的元素 某物 . 或者为了回答最初的问题,像下面这样的方法应该可以实现(未经测试的):

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

这是 选择器级别4 规范。 使用此选择器,可以在给定的选择器(!)后使用感叹号,根据元素的子级设置元素的样式。.

例如:

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

这样,可以根据父元素的滚动来更改多个内部标记中的样式。

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

如果元素具有 tabindex 属性。

Browser support for focus-within

Tabindex

例子

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

有人提出过这样的建议吗?只是一个横向菜单的想法…

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

Updated demo and the rest of code

Another example 如何与文本输入一起使用-选择父字段集

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

这里有很多技术解释。

Jonathan Snook explains how CSS is evaluated .

Chris Coyier on the talks of Parent selector .

Harry Roberts again on writing efficient CSS selectors .

但是 Nicole Sullivan has some interesting facts on positive trends .

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

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

不过,你也可以这样做。

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

JQuery

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

如果您想使用jquery实现这一点,这里是 jQuery parent selector

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

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

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

在这里,我们打开了每个元素的元素查询 a.active ,对于查询中的样式, $parent 有道理,因为有一个参考点。浏览器可以找到父级,因为它与 parentNode 在JavaScript中。

Here's a demo of $parent 和 another $parent demo that works in IE8 以及 a screenshot in case you don't have IE8 around to test with .

EQCS还包括 meta-selectors $prev 对于选定元素之前的元素, $this 仅限于与元素查询匹配的元素,等等。

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

简短的回答是 不 我们没有 parent selector 在CSS的这个阶段,但是如果您无论如何都不需要交换元素或类,那么第二个选项是使用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;

虽然目前标准CSS中没有父选择器,但我正在处理一个名为 斧子 (I. 增强的CSS选择器语法/acsss )其中7个新的选择器包括:

1. 安 直系父母 选择器 < (使相反的选择 > )
2. 安 任何祖先选择器 ^ (使相反的选择 [SPACE] )

斧子 目前处于相对早期的测试阶段。

请在此处查看演示:

http://rounin.co.uk/projects/axe/axe2.html

(将左边的两个列表与标准选择器进行比较,右边的两个列表与axe选择器进行比较)

这里有一个黑客使用 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中选择父级。

但你已经有了 .active 班,把那个班移到 li (而不是 a )?这样就可以同时访问 锂 以及 一 仅通过CSS。

至少包括CSS3,您不能这样选择。 但是现在在JS中可以很容易地完成,您只需要添加一些普通的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>

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

在CSS中,我们可以沿着层次结构级联到属性,但不能反向级联。 要修改子事件的父样式,可能需要使用jquery。

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