css選擇除輸入類型複選框以外的所有元素

Question

如何將此css類應用於除輸入類型複選框之外的所有元素？這裏是我有什麼，但它不工作：

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

和HTML我將這種上：在類昏暗

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

所有輸入

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