是否有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;
}

---

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

li

并引用

a

：

li.active > a {
    property: value;
}

---

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

---

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

.active

类，因此将该类移动到

li

（而不是

a

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

li

和

a

。

我认为您不能仅在CSS中选择父项

---

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

.active

类，因此将该类移动到

li

（而不是

a

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

li

和

a

。

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

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

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

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

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

：has（）

伪类。它将类似于

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

但是，截至2021年，

---

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

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

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

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

：has（）

伪类。它将类似于

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

但是，截至2021年，

---

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

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

---

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

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

E ~ F {
    property: value;
}

这与前面有

E

元素的任何

F

元素相匹配。

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

E ~ F {
    property: value;
}

这与前面有

E

元素的任何

F

元素相匹配。

您可以使用：

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

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

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

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

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

查看此HTML：

先生，您叫什么名字

当

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

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

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

顺便说一句，它在InternetExplorer中工作。
您可以使用：

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

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

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

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

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

查看此HTML：


先生，您叫什么名字

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

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

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

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

li{
填充：0；
溢出：隐藏；
}
a{
显示：块；
宽度：100%；
颜色：…，背景：…，边框半径：…，等等。。。
}
a、 活跃的{
颜色：…，背景：。。。
}
尝试将
a
切换到
block
显示，然后使用您想要的任何样式。<
a.active h1 {color: blue;}
a.active p {color: green;}

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

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