禁用元素的CSS选择器

Question

我正在使用AngularJS来禁用/启用图像按钮 我的css选择器显示透明不起作用。
我开始使用try it选择输入元素上的禁用，并且它确实应用了css，但不是我的div元素。
我添加了不起作用的div元素，产生以下代码：

document.querySelector([
  `section[class="${CHAT[DATA].title}"]`,   // exact match, only one class
  `section[class^="${CHAT[DATA].title} "]`, // starts-with
  `section[class$=" ${CHAT[DATA].title}"]`, // ends-with
  `section[class*=" ${CHAT[DATA].title} "]` // contains among other classes
].join(','))

我的AngularJS html元素已添加/删除已禁用的内容。那么如何让css应用于添加了禁用的div呢？

注意：我知道可以复制元素，使用ng-if显示/隐藏它们并使用类将透明度应用于它，但这非常难看。

Answer 1

:disabled伪选择器仅适用于输入元素。对于div，请使用div[disabled]来应用css

使用

div[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<强>演示

＆＃13;

＆＃13;

input:enabled {
    background: #ffff00;
}

input:disabled {
    background: #dddddd;
}
div[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

＆＃13;

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用属性选择器[attribute='value']，它将适用于所有类型的元素，与伪类:disabled相比，后者仅适用于表单元素

在您的情况下，属性disabled没有值，您可以省略它[disabled]

注意，当不使用选择器中的值部分时，它将使用和不使用目标元素，但正如您可以看到使用最后一个CSS规则，使用值部分时，它赢得了＆＃39;吨。

Stack snippet （我在这里使用了它，但你当然可以:disabled

＆＃13;

＆＃13;

input

＆＃13;

input:not([disabled]) {
  background: #ffff00;
}

input[disabled] {
  background: #dddddd;
}

div[disabled] {
  opacity: 0.4;
  filter: alpha(opacity=40);      /* For IE8 and earlier */
}

div[disabled='disabled'] {
  color: red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

对于div元素，您应该使用div[disabled="disabled"]或div[disabled]

它不是您可以应用:disabled

的输入元素

Answer 4

您可以使用 div [禁用=＆＃34;禁用＆＃34;] 来选择已禁用的div。

Answer 5

见下面的例子：

input:enabled {
    background: #ffff00;
}

input:disabled {
    background: #dddddd;
}
div:disabled {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
<input disabled/>should be transparent

并且aslo看到这个：

Answer 6

选择所有禁用的输入元素（例如输入，文本区域，选择，选项，单选，复选框，按钮）：

The database cluster initialization failed

选择所有其他禁用的元素（例如div，section，p等）：

*:disabled{
    //enter code here
}