是否有CSS父选择器？

如何选择作为锚元素直接父元素的

元素

例如，我的CSS如下所示：

li < a.active {
    property: value;
}

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

li

显然，JavaScript有很多方法可以做到这一点，但我希望有一些CSS级别2固有的解决方法

我试图设置样式的菜单被CMS弹出，因此我无法将活动元素移动到

元素。。。（除非我将菜单创建模块设为主题，我不希望这样做）

---

有什么想法吗？

在CSS2中没有这样做的方法。您可以将该类添加到

li

并引用

a

：

li.active > a {
    property: value;
}

---

我不认为你只能在CSS中选择父对象

---

但是，由于您似乎已经有了一个

.active

类，因此将该类移动到

li

（而不是

a

）会更容易。这样，您就可以仅通过CSS访问

li

和

a

。

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

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

如果有一种方法可以做到这一点，那么可以使用当前的CSS选择器规范：

也就是说，包含一个将提供此功能的

：has（）

伪类。它将类似于

li:has（>a.active）{/*样式应用于li标记*/}

但是，截至2021年，

---

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

正如其他几个人所提到的，没有一种方法可以仅使用CSS设置元素父元素的样式，但以下方法适用于：

CSS选择器“”可能用于您想要的：

E ~ F {
    property: value;
}

这与前面有

E

元素的任何

F

元素相匹配。

您可以使用：

*！>输入[type=text]{background:#000；}

这将选择文本输入的任何父项。但是等等，还有很多。如果需要，可以选择指定的父级：

。输入换行！>输入[type=text]{background:#000；}

或在其处于活动状态时选择它：

。输入换行！>输入[类型=文本]：焦点{背景：#000；}

查看此HTML：

先生，您叫什么名字

当

输入处于活动状态时，您可以选择
span.help
，并显示它：

.input wrap。帮助>输入[类型=文本]：焦点{显示：块；}

还有更多的能力；只需查看插件的文档即可

顺便说一句，它在InternetExplorer中工作。
W3C排除了这样一个选择器，因为它会对浏览器的性能产生巨大影响。
尝试将
a
切换到
块
显示，然后使用您想要的任何样式。
a
元素将填充
li
元素，您可以根据需要修改其外观。不要忘记将
li
padding设置为0

li{
填充：0；
溢出：隐藏；
}
a{
显示：块；
宽度：100%；
颜色：…，背景：…，边框半径：…，等等。。。
}
a、 活跃的{
颜色：…，背景：。。。
}
您可以尝试使用hyperlink作为父元素，然后更改悬停时的内部元素。像这样：

a.activeh1{颜色：红色；}
a、 活动：悬停h1{颜色：绿色；}
a、 活性h2{颜色：蓝色；}
a、 活动：悬停h1{颜色：黄色；}

通过这种方式，您可以根据父元素的滚动来更改多个内部标记中的样式。
我知道OP正在寻找CSS解决方案，但使用jQuery很容易实现。在我的例子中，我需要为包含在子
中的
标记找到
父标记。jQuery具有
：具有
选择器，因此可以通过其包含的子项来识别父项：

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

将选择具有id为someId的子元素的
ul
元素。或者，为了回答最初的问题，应该使用以下类似的方法（未经测试）：

没有父选择器；就像没有以前的同级选择器一样。不使用这些选择器的一个很好的原因是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您编写了：

body:包含选择器（a.active）{background:red；}

然后，浏览器将不得不等待，直到它加载并解析了所有内容，直到
确定页面是否应该为红色

这篇文章对此进行了详细的解释。
目前没有父选择器&W3C的任何会谈都没有讨论它。您需要了解浏览器如何评估CSS，才能真正了解我们是否需要它

这里有很多技术上的解释




但是

这些人在前端开发领域都是一流的。
这是选择器4级规范中讨论最多的方面。
这样，选择器就可以根据元素的子元素，在给定的选择器（！）后面使用感叹号来设置元素的样式

例如：

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

身体！a:悬停{
背景：红色；
}

如果用户将鼠标悬停在任何锚点上，将设置红色背景色

但是我们必须等待浏览器的实现：（
从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript来解决这一问题

但是，您也可以这样做

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

jQuery

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

如果您想使用jQuery实现这一点，这里是reference
<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

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

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

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

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

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

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}