在 CSS 2 中没有办法做到这一点。您可以将该类添加到 并引用 ：lia

li.active > a {
    property: value;
}

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

但是，由于您似乎已经有一个类，因此将该类移动到（而不是 ）。这样，您只能通过 CSS 访问和访问。.activelialia

据我所知，不在 CSS 2 中。CSS 3 具有更强大的选择器，但并非在所有浏览器中都一致地实现。即使使用改进的选择器，我也不认为它会完全完成您在示例中指定的内容。

更新于 2023 年 11 月Firefox v120+ 用户现在可以选择使用 ：has（）pesudo 类。

2023 年 10 月更新：无法以适用于所有主要浏览器的方式选择 CSS 中元素的父元素。

选择器级别 4 工作草案指定了一个提供此功能的 ：has（） 伪类，其中包括：

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

参考 https://caniuse.com/css-has 以检查目标浏览器是否具有支持。

您可能需要求助于 JavaScript，直到所有浏览器都完全支持此功能。

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

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

CSS 选择器 “General Sibling Combinator” 也许可以用于您想要的内容：

E ~ F {
    property: value;
}

这与元素前面的任何元素匹配。FE

您可以使用以下脚本：

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

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

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

顺便说一句，它适用于 Internet Explorer。

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

尝试切换到显示，然后使用您想要的任何样式。该元素将填充该元素，您将能够根据需要修改其外观。不要忘记将填充设置为 0。ablockalili

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

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

我知道OP正在寻找CSS解决方案，但是使用jQuery很容易实现。就我而言，我需要找到子项中包含的标记的父标记。jQuery有选择器，所以可以通过它所包含的子项来识别父项：<ul><span><li>:has

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

将选择具有 id 为 someId 的子元素的元素。或者要回答原始问题，像下面这样的东西应该可以解决问题（未经测试）：ul

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

没有父选择器;就像以前没有兄弟姐妹选择器一样。没有这些选择器的一个很好的理由是，浏览器必须遍历元素的所有子元素，以确定是否应该应用类。例如，如果您写道：

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

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

文章为什么我们没有父选择器对此进行了详细解释。

目前还没有父选择器，甚至在W3C的任何讨论中都没有讨论过它。您需要了解浏览器如何评估 CSS，才能真正了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook 解释了如何评估 CSS。

克里斯·科伊尔（Chris Coyier）谈家长选择器的演讲。

Harry Roberts 再次讲述了如何编写高效的 CSS 选择器。

但妮可·沙利文（Nicole Sullivan）对积极趋势有一些有趣的事实。

这些人都是前端开发领域的佼佼者。

这是选择器级别 4 规范中讨论最多的方面。 这样，选择器将能够通过在给定选择器 （！） 之后使用感叹号来根据其子元素设置元素的样式。

例如：

body! a:hover{
   background: red;
}

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

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

从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript来解决这个问题。

但是，您也可以执行类似操作。

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

jQuery的

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

如果要使用 jQuery 实现此目的，这里是 jQuery 父选择器的参考。

只是一个水平菜单的想法......

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

更新了演示和其余代码

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

不可以，您不能只在 CSS 中选择父项。

但是，由于您似乎已经有一个类，因此将该类移动到（而不是 ）。这样，您只能通过 CSS 访问和访问。.activelialia

有一个插件扩展了 CSS 以包含一些非标准功能，这些功能在设计网站时确实有帮助。它被称为 EQCSS。

EQCSS 添加的一件事是父选择器。它适用于所有浏览器，Internet Explorer 8 及更高版本。格式如下：

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

所以在这里，我们对每个元素都打开了一个元素查询，对于该查询中的样式，诸如 这样的事情是有意义的，因为有一个参考点。浏览器可以找到父级，因为它与 JavaScript 非常相似。a.active$parentparentNode

下面是 $parent 的演示和另一个适用于 Internet Explorer 8 的 $parent 演示，以及一个屏幕截图，以防你没有 Internet Explorer 8 进行测试。

EQCSS 还包括元选择器：用于选定元素之前的元素，以及仅用于与元素查询匹配的元素，等等。$prev$this

虽然目前标准 CSS 中没有父选择器，但我正在开发一个名为 axe 的（个人）项目（即。增强的 CSS 选择器语法 / ACSSSS）在其 7 个新选择器中，包括：

1. 直接父级选择器（使相反的选择<>)
2. 任何祖先选择器（它使相反的选择能够^[SPACE])

axe 目前处于相对早期的 BETA 开发阶段。

在此处观看演示：

.parent {
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 12px;
  background-color: rgb(191, 191, 191);
}

.child {
  width: 90px;
  height: 90px;
  margin: 45px;
  padding-top: 12px;
  font-family: sans-serif;
  text-align: center;
  font-size: 12px;
  background-color: rgb(255, 255, 0);
}

.child.using-axe < .parent {
  background-color: rgb(255, 0, 0);
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child using-axe">Here, the axe parent selector turns the outer square red.</div>
</div>


<script src="https://rouninmedia.github.io/axe/axe.js"></script>

在上面的示例中是直接父选择器，因此<

• .child.using-axe < .parent

方法：

其任何直系父母是.child.using-axe.parent

您也可以使用：

• .child.using-axe < div

这意味着：

其任何直系父级是.child.using-axediv

简短的回答是否定的;我们在 CSS 的这个阶段没有，但如果你无论如何都不必交换元素或类，第二个选项是使用 JavaScript。像这样的东西：parent selector

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;

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

如果元素具有属性，则可以聚焦该元素。tabindex

浏览器支持焦点内

选项卡索引

例

.parent:focus-within {
  background: hsl(199deg, 65%, 73%);
}

/* demo styles */
body {
  margin: 0;
}
.parent {
  background: hsl(0, 0%, 80%);
  min-height: 100vh;
  display: grid;
  place-content: center;
}
.child {
  background: hsl(0, 0%, 0%);
  color: white;
  padding: 3rem;
  outline: 0;
  cursor: pointer;
  font: 18px/1.25 sans-serif;
  width: 20ch;
}

<div class="parent">
  <div class="child" tabindex="0">
    Click or Focus on me, my parent will change.
  </div>
</div>

您可以使用 ：has（） CSS 伪类

但它对浏览器的支持有限（目前不受Firefox支持）。

至少在 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>

这是一个使用 with 的技巧：pointer-eventshover

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

现在是 2019 年，CSS 嵌套模块的最新草案实际上有这样的东西。引入 at 规则。@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; }
 */

有什么想法吗？

如果 CSS4 在向后行走时添加一些钩子，它会很花哨。在那之前，可以使用和/或输入s 来破坏事物连接的通常方式，并通过这也允许 CSS 在其正常范围之外运行......checkboxradio

/* 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，通过链接 / inputs 和触发器的 and 属性，几乎可以从任何地方触摸和重新触摸除 and 之外的任何内容;可能会有人在某个时候展示如何重新触摸它们。body:rootidforradiocheckboxlabel

另一个警告是，只有一个特定的可能使用，首先/赢得切换状态，换句话说......但是多个标签都可以指向同一个，尽管这会使HTML和CSS看起来更糟糕。inputidcheckboxradioinput

...我希望 CSS Level 2 原生存在某种解决方法......

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

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

...但是对于像 和 这样的事情，我完全不确定它们首先出现在哪个 CSS 版本中。::after:hover

总而言之，请不要在生产中使用它，即使是在愤怒中。当然，开个玩笑，或者换句话说，仅仅因为某事可以做并不总是意味着它应该做。

我会雇用一些 JavaScript 代码来做到这一点。例如，在 React 中，当你遍历一个数组时，向父组件添加另一个类，这表明它包含你的子组件：

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

然后简单地说：

.parent {
    color: #000;
}

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

目前，只有当我们在父元素中有一个元素时，才能基于子元素更改父元素。当输入获得焦点时，其相应的父元素可能会受到 CSS 的影响。<input>

以下示例将帮助您了解在 CSS 中的使用。:focus-within

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

没有 css（因此在 css 预处理器中）父选择器，因为“CSS 工作组之前拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关。

试试这个...

该解决方案使用没有 Javascript 的纯 CSS2 规则，适用于所有浏览器，无论新旧。单击后，子标记将激活其伪类事件。然后，它只是隐藏自己，让事件冒泡到父标签，然后父标签重新设计自己，并以新样式再次显示他的主播子项。子项已设置父项的样式。anchoractiveactiveli

以您的示例为例：

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

现在，在伪类打开的情况下应用这些样式，以便在单击链接时重新设置父标记的样式：activeali

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

现在，您应该会看到带有绿色背景的链接在单击时更改为列表项的蓝色背景。

转向

点击。

这是一个类似（但不是我感觉完全相同）问题的答案，该问题已被关闭以支持此问题，因此我在此处检查输入时如何更改边框颜色。

由于无法使用纯 CSS 根据其子项的状态来设置父项的样式，因此此代码段会更改 HTML，以便在输入元素之后立即有一个空的 span 元素。在将输入悬停在该点之前，此 span 元素不执行任何操作，此时它会显示自身并展开以适合与设置了位置的祖先相同的大小。这是标签本身，而不是输入。因此，边框（阴影）就像在标签上一样显示。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.OuterField {
  display: flex;
}

.listLabel {
  padding: 8px 5px;
  border: 2px solid black;
  width: 32%;
  margin: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  position: relative;
}

input[type="radio"]~span {
  display: none;
}

input[type="radio"]:checked~span {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  box-shadow: 0 0 0 3px orange;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="OuterField">
  <label for="List1" class="listLabel">List 1
        <input type="radio" id="List1" name="list" value="List1">
        <span></span>
     </label>
  <label for="List2" class="listLabel">List 2
         <input type="radio" id="List2" name="list" value="List2">
         <span></span>
     </label>
</div>

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>

以下选择器将同时选择和grandparentparent

div:has(.child)

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

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

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

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

更新了 2023 CSS 选择器 4

在 CSS Selectors 4 规范中，CSS 引入了一个名为 的新选择器，它最终允许我们选择父项。这意味着我们将能够定位一个包含特定子元素的 CSS 元素。Safari 和 Chrome 105 都支持此功能。完整的支持表如下所示。:has()

父选择器工作原理

在 CSS 中，如果我们想选择某些东西，我们使用降序 DOM 的选择器。

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

 div p {
   color: red;
}

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

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

例如，选择一个有子项现在如下所示：divp

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

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

将父选择与其他选择器组合

就像任何其他 CSS 选择器一样，我们可以在特定情况下将其组合在一起。 例如，如果您只想选择具有直接子级的标签：divspan

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

正如词汇所建议的那样，它不仅限于父母的选择。:has

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

span:has(+ div) {
color: red;
}

甚至，通过使用 ：not（） 选择器来选择一个没有子元素的元素。

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

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

在 CSS 中选择仅包含文本的元素

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

虽然对于只有空格的元素来说，这不是完美的解决方案（因为这将选择任何只有文本而没有额外的 HTML DOM 元素的元素）——但它确实让我们能够选择只有文本节点的 DOM 元素，这在以前是不可能的。我们可以通过以下代码来实现这一点：:empty

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