禁用 DIV 元素的样式

Question

我正在尝试为禁用状态的div添加样式，我有以下代码：

<div disabled> Welcome </div>
<style>
    div:disabled{
      background-color:#f1f1f1;
    }
</style>

该元素上没有任何类或ID。它是系统生成的。我想让背景颜色变成浅灰色。

- Nitin Shinde

---

div 没有启用/禁用语义。你没有一个处于禁用状态的 div。你只是碰巧有一个带有名为 disabled 的属性的 div。这就是为什么 :disabled 伪类不起作用的原因。如果你想给你的 div 添加一个假的禁用属性，可以使用 data-disabled 或其他类似的属性。 - BoltClock

Answer 1

尝试使用属性选择器：

div[disabled]{}

了解更多信息请访问：

https://www.w3schools.com/css/css_attribute_selectors.asp

- Wolfgang Blessen

Answer 2

可以使用属性选择器来实现，这种情况下给定属性为"disabled":

div[disabled] {
    background-color: #f1f1f1;
}

以下是关于使用data属性的非常有用的参考指南：MDN上的数据属性使用指南 这里是关于属性选择器的具体指南：MDN上的属性选择器指南 属性选择器可以通过给定属性或属性值的存在来选择元素。

- Matt D. Webb

Answer 3

在 div 中，disabled 是一个属性，因此请使用属性选择器。

<div disabled> Welcome </div>
<style>
      div[disabled] {
         background-color:#f1f1f1;
      }
</style>

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

- Michael Benjamin

---

谢谢你们两个。 - Nitin Shinde

Answer 4

将CSS转换成属性

div[disabled]{
     background-color:#f1f1f1;
  }

- chirag solanki