Question

如何将此css类应用于所有元素除输入类型复选框外？这就是我所拥有的，但它不起作用：

.dim:not(input[type="checkbox"]) {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    filter:alpha(opacity=25);
    opacity: 0.25;
}

我在html上应用了这个：

<tr class="dim">
    <td>
        <input type="checkbox">
    </td>
    <td>
        <input type="text" class="input-large enforce-label" name="labels[]" maxlength="30">
    </td>
    <td>
        <input type="text" class="input-large" name="addresses[]" maxlength="255">
    </td>
    <td>
        <input type="text" class="input-small" name="ssh_usernames[]" maxlength="100">
    </td>
    <td>
        <input type="text" class="input-small enforce-ssh-port" name="ssh_ports[]" maxlength="5">
    </td>
</tr>

Answer 1

课程 dim

中的所有输入

.dim input{...........}

所有输入但不是类型复选框

.dim input:not([type=checkbox]){}

所以关注css的工作原理：

.dim input:not([type=checkbox]){
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    filter:alpha(opacity=25);
    opacity: 0.1;
}

http://jsfiddle.net/efpL2/

Answer 2

在.dim和:not之间添加空格，并删除input一词。

如果没有空格，您的选择器只匹配class="dim"不是复选框的元素。在这种情况下，唯一匹配的是外部<tr>（它有class="dim"而不是复选框），这可能不是您尝试做的。

使用空格，您的选择器会匹配class="dim"不是复选框的元素的后代。（您可能还希望将选择器更改为更具体的内容，例如.dim > td > :not([type="checkbox"])，如果您只希望它与表单元素匹配）。

您需要删除input一词，因为:not只接受一个简单的选择器。您可以编写:not([type="checkbox"]))，因为[type="checkbox"]是一个简单的选择器，但您无法编写:not(input[type="checkbox"])，因为input和[type="checkbox"]是两个不同的单选择器。

Answer 3

input:not([type="checkbox"]) {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
filter:alpha(opacity=25);
opacity: 0.25;
}

或者不是在TR中声明.dim类，而是在包装DIV中声明它，如下所示：

      <div class="dim">
        <tr >
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input type="text" class="input-large enforce-label" name="labels[]" maxlength="30">
            </td>
            <td>
                <input type="text" class="input-large" name="addresses[]" maxlength="255">
            </td>
            <td>
                <input type="text" class="input-small" name="ssh_usernames[]" maxlength="100">
            </td>
            <td>
                <input type="text" class="input-small enforce-ssh-port" name="ssh_ports[]" maxlength="5">
            </td>
        </tr>
   </div><!--end .dim-->

CSS：

.dim input:not([type="checkbox"]) {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
filter:alpha(opacity=25);
opacity: 0.25;
}

css选择除输入类型复选框以外的所有元素

3 个答案: