有一个CSS父选择器吗？

Question

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

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

li < a.active {
    property: value;
}

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

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

有任何想法吗？

Answer 1

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

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

• 选择器等级3规格
• CSS 2.1选择器规范

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

该选择器4级工作草案包括:has()伪类的作品一样的jQuery的实现.截至2018年,任何浏览器仍然不支持此功能.

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

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

Answer 2

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

但是,由于您似乎已经有了一个.active类,将该类移动到li(而不是a)上会不会更容易？这样你就可以只访问li和a通过css.

Answer 3

您可以使用此脚本.

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

Answer 4

正如其他几个人所提到的那样,没有办法只使用CSS来设置元素的父/的样式,但以下内容适用于jQuery:

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

Answer 5

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

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

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

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

Answer 6

是: :has()

浏览器支持:无

Answer 7

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

li.active > a {
    property: value;
}

Answer 8

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

Answer 9

在 CSS 选择器 4 规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们\xe2\x80\x99将能够定位其中具有特定子元素的CSS元素。Safari 和 Chrome 105 均已支持此功能。此处显示\n 完整的支持表显示了完整的支持表。

\n

父选择器的工作原理

\n

在 CSS 中，如果我们想要选择某些内容，我们可以使用沿 DOM 向下排列的选择器。

\n

例如，在 div 标签中选择 ap 标签如下所示：

\n

 div p {\n   color: red;\n}\n

\n

到目前为止，\xe2\x80\x99t 无法真正选择其中包含标签的div标签，这意味着我们必须求助于. \xe2\x80\x99 没有在 CSS 中实现的主要原因是它\xe2\x80\x99 是一个相当昂贵的操作。CSS 的解析速度相对较快，但选择父标签需要相对大量的处理。pJavascript

\n

使用:has选择器，我们现在可以选择div具有p子元素的元素，或选择器的任何正常组合。

\n

例如，选择一个div有孩子的p现在看起来像这样：

\n

div:has(p) {\n  color: red;\n}\n

\n

这将使任何div有孩子的人p变红。

\n

将父级选择与其他选择器相结合

\n

就像任何其他 CSS 选择器一样，我们可以针对特定情况结合使用它。\n例如，如果您只想选择div具有直接span子级的标签：

\n

div:has(> span) {\n  color: red;\n}\n

\n

正如词汇所:has暗示的，它不仅仅限于父母选择。

\n

例如，下面我们可以选择一个span兄弟：:hasdiv

\n

span:has(+ div) {\ncolor: red;\n}\n

\n

或者甚至，使用 :not() 选择器选择没有子元素的元素。

\n

例如，以下命令将选择任何没有 ap 子级的 div：

\n

div:not(:has(p)) {\n color: red;\n}\n

\n

选择仅包含 CSS 文本的元素

\n

CSS 中一个非常常见的问题是:empty标签不会选择包含任何文本的元素 - 因此有时一个元素可以包含一个空格，并且:empty不适用。选择:has器使我们能够选择仅包含文本节点且不包含其他子元素的元素。

\n

虽然这对于带有空格的简单元素来说并不是完美的解决方案:empty（因为这将选择仅包含文本且没有其他 HTML DOM 元素的任何元素），但它确实使我们能够选择仅包含文本节点的 DOM 元素，这在以前是不可能的。我们可以通过以下代码来实现：

\n

div:not(:has(*)) {\n  background: green;\n}\n

\n

Answer 10

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

E ~ F {
    property: value;
}

这匹配任何F元素前面的E元素.

Answer 11

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

Answer 12

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

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

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

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

Answer 13

这是Selectors Level 4规范中讨论最多的方面.使用此选择器,可以通过在给定选择器(!)后面使用感叹号根据其子元素设置元素的样式.

例如:

body! a:hover{
   background: red;
}

如果用户悬停在任何锚点上,将设置红色背景颜色.

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

Answer 14

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

Answer 15

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

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

浏览器支持焦点内部

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>

Answer 16

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

这里有很多技术解释.

Jonathan Snook解释了如何评估CSS.

Chris Coyier关于父选择器的谈话.

Harry Roberts再次编写高效的CSS选择器.

但Nicole Sullivan对积极趋势有一些有趣的事实.

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

Answer 17

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

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

更新了演示和其余代码

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

Answer 18

有一个扩展CSS的插件,包括一些非标准功能,可以在设计网站时提供帮助.它被称为EQCSS.

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

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

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

这是一个演示$parent和另一个$parent在IE8中运行的演示,以及一个屏幕截图,以防你没有IE8来测试.

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

Answer 19

CSS 父选择器（也称为:has() 选择器）终于登陆 Safari TP 137。该功能目前也在 Chrome 中实现。（MDN 文档）

父级选择是通过伪类完成的:has()。例如，div:has(> .child)将选择<div>具有子child级的所有元素。

其他例子：

选择元素的直接父元素

<div>
  <p>Child Element</p>
</div>

div:has(> p)

选择元素的所有父元素

<div id="grandparent">
      <div id="parent">
            <div id="child"></div>
      <div>
</div>

以下选择器将同时选择grandparent和parent

div:has(.child)

您还可以将它用于嵌套选择器，甚至与其他伪类一起使用：

div:has(> :nth-child(10))

其他有效的 CSS 运算符可用于自定义查询。

请密切关注caniuse.com/css-has以了解浏览器兼容性。

Answer 20

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

不过,你也可以这样做.

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

jQuery的

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

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

Answer 21

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

Answer 22

这是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>

Answer 23

简短的回答是NO ; 我们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;

Answer 24

现在是2019年，CSS嵌套模块的最新草案实际上就是这样。介绍@nest规则。

3.2。嵌套规则：@nest

虽然直接嵌套看起来不错，但它有些脆弱。不允许使用某些有效的嵌套选择器，如.foo＆，并且以某些方式编辑选择器会使规则意外无效。同样，有些人发现嵌套很难在视觉上与周围的声明区分开。

为了解决所有这些问题，此规范定义了@nest规则，该规则对如何有效嵌套样式规则施加了较少的限制。其语法为：

@nest = @nest <selector> { <declaration-list> }

@nest规则的功能与样式规则相同：它以选择器开头，并包含适用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须包含嵌套，这意味着它在某个位置包含嵌套选择器。如果所有选择器的所有单个复杂选择器都包含嵌套，则选择器列表包含嵌套。

（从上面的URL复制并粘贴）。

此规范下的有效选择器示例：

.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; }
 */

Answer 25

尽管目前标准CSS中没有父选择器，但我正在一个名为ax（即CSS增强选择器语法/ ACSSSS）的（个人）项目中工作，该项目在其7个新选择器中包括：

1. 一个直接父选择器<（这使得相对精选>）
2. 的任何祖先选择器 ^（这使得相对精选[SPACE]）

斧头目前处于相对较新的测试版开发阶段。

在此处查看演示：

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

（比较左侧使用标准选择器样式的两个列表和右侧使用斧形选择器样式的两个列表）

Answer 26

至少在 CSS 3 之前（包括 CSS 3），您不能这样选择。但是现在用 JavaScript 可以很容易地完成，你只需要添加一些普通的 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>

Answer 27

有任何想法吗？

如果 CSS4为倒退添加了一些钩子，它会很漂亮。在那之前，有可能（虽然不建议）使用和/或s来打破事物连接的通常方式，并且通过它也允许 CSS 在其正常范围之外运行......checkboxradio input

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* ▼ - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}

<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... 非常粗糙，但仅使用 CSS 和 HTML，就可以通过链接/ s和触发器的和属性，从几乎任何地方触摸和重新触摸除bodyand 之外的:root任何内容；可能有人会在某个时候展示如何重新触摸它们。idforradiocheckbox inputlabel

另外一个需要注意的是，只有一个 input特定的id可能使用，第一checkbox/radio 胜换句话说，一个切换状态......但多个标签都可以指向相同的input，尽管这将使HTML和CSS的外观甚至阴暗面。

...我希望有某种解决方法存在于 CSS Level 2 中...

我不确定其他伪类，但我:checked是 CSS 3 之前的。如果我没记错的话，[checked]这就是为什么你可能会在上面的代码中找到它的原因，例如，

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

...但是对于像::afterand 之类的东西:hover，我完全不确定它们最初出现在哪个 CSS 版本中。

综上所述，请不要在生产中使用它，甚至不要在生气时使用它。作为一个笑话，或者换句话说，仅仅因为可以做某事并不总是意味着它应该做。