您可以使用以下脚本：

*! > 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-wrap! .help > input[type=text]:focus { display: block; }

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

顺便说一下，它在Internet Explorer中工作。

Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。

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

截至2022年，Firefox是唯一默认不支持它的浏览器。

同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。

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

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

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

《为什么我们没有父选择器》一文详细解释了这一点。

您可以使用以下脚本：

*! > 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-wrap! .help > input[type=text]:focus { display: block; }

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

顺便说一下，它在Internet Explorer中工作。

基于子元素更改父元素当前只能在父元素中有＜input＞元素时发生。当输入获得焦点时，其对应的父元素可能会使用CSS受到影响。

以下示例将帮助您理解在CSS中使用：focus in。

.外部div{宽度：400px；高度：400px；填充：50px；浮动：左侧}.outer div：聚焦在{背景：红色；}.内部div{宽度：200px；高度：200px；浮动：左侧；背景：黄色；填充：50px；}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div（背景色）类。有可能吗？<input type=“text”placeholder=“Name”/></div></div>

更新2022 CSS选择器4

在CSS Selectors 4规范中，CSS引入了一个名为：has（）的新选择器，它最终允许我们选择父级。这意味着我们将能够针对一个包含特定子元素的CSS元素。这在Safari和Chrome105中都已得到支持。显示完整的支撑台在这里

父选择器工作

在CSS中，如果我们想选择一些东西，我们使用DOM下面的选择器。

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

 div p {
   color: red;
}

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

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

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

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

这将使任何带有子p的div变为红色。

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

就像任何其他CSS选择器一样，我们可以针对特定情况组合这些选择器。例如，如果只选择具有直接span子级的div标记：

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

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

例如，下面我们可以选择一个span，该span：有一个同级div：

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

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

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

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

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

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

虽然这并不是简单的空元素和空格的完美解决方案（因为这将选择任何只包含文本的元素，而不包含额外的HTML DOM元素），但它确实让我们能够选择只包含文本节点的DOM元素，这在以前是不可能的。我们可以通过以下代码实现这一点：

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