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

时间:2014-02-14 03:49:47

标签: css css3 css-selectors

如何将此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>

3 个答案:

答案 0 :(得分:6)

课程 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/

答案 1 :(得分:1)

.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"]是两个不同的单选择器。

答案 2 :(得分:0)

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;
}