如何在CSS中根据子元素的属性设置父元素的样式？

Question

例如，当输入被禁用时，父元素应该具有黑色背景，否则为白色。

<div><input type="text" disabled="disabled" /></div>

div input[type="text", disabled="disabled"] {
    background: Black;
}

我想样式化父元素而不是子元素。

- Sadegh

Answer 1

使用CSS无法实现。

但是可以使用JavaScript实现。

- PeeHaa

---

这是正确的答案，不是吗？如果您有更好的解决方案，请告诉我。你让我很好奇... - PeeHaa

不，你的答案绝对正确。 - Sadegh

Answer 2

截至最新版本，CSS中目前没有父级选择器。

- Jamie Dixon

---

不过，应该有的吧？我的意思是，如果做起来像 input < div { background: black; } 这样简单的话，那该多好啊。 - JakeParis

@JMC：确实。显然，让这样的选择器在性能上工作起来是相当具有挑战性的（特别是考虑到它们必须在JavaScript每次更改DOM时都能正常工作）-请参见http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940和http://snook.ca/archives/html_and_css/css-parent-selectors。 - Paul D. Waite

@Paul，这是可能的！请回答并在其中放置您的链接。 - Sadegh

@Sadegh - 啊，不，我的链接只是讨论为什么父选择器不会很快在CSS中实现。 - Paul D. Waite

Answer 3

你可以使用CSS的has选择器来选择该元素的父级；

例如：

假设我们有一个div，div里面有一个输入元素；

.hasan-ablak {
            padding: 5px;
            background-color: green;
        }

.hasan-ablak:has(input:disabled) {
  background-color: orange;
}
.hasan-ablak:has(input:disabled) {
            background-color: red;
        }

<div class="hasan-ablak">
            <input type="text">
</div>
    
<div class="hasan-ablak">
  <input type="text" disabled>
</div>

- Hasan ABLAK