這兩個選擇器使用「：not」有什麼區別？

這兩個選擇器有什麼區別？這兩個選擇器使用「：not」有什麼區別？

input:not([type="radio"][type="submit"]) 
input:not([type="radio"]):not([type="submit"])

請問有沒有type屬性的<input>標籤來選擇？

我讀過：

來源

2015-10-08 K._

Waw這是一個艱難的。我正在測試（並且意外地發佈了一個答案），表明它們都不是實際的目標 - 並且在閱讀了「：not」的規範之後，並沒有說明它們是否可以被鏈接。它說它們不能嵌套，但那就是它......我想知道它是否正在絆倒雙重類型，但我找不到證明這一點的好方法。好問題！ – somethinghere

當然，'：不是'可以鏈接，爲什麼不應該？ – raina77ow

謝謝你的編輯，Xufox！你做得更好。 –

引用the Selector Level 4 docs ：

的否定僞類，:not()，是一種功能性僞類服用 一個選擇器列表作爲參數。它表示一個元素，不是由它的參數表示的。

注：在選擇器3級，只有單一簡單選擇器被允許作爲參數:not()。

這就解釋了爲什麼這...

input:not([type="radio"][type="submit"])

...是不是在不執行CSS4規格，這部分的任何瀏覽器都支持（據我所知，沒有人在做這個時間點，畢竟這只是一個工作草案）。但邏輯是有缺陷的這個選擇，太：即使語法是普遍支持，它應該被寫成...

input:not([type="radio"],[type="submit"])

見，[foo][bar]規則的要求，接受治療的任何元素是既foo和bar。但是（當然！）任何輸入都不可能是radio和submit類型。底線：您將不得不使用...

input:not([type="radio"]):not([type="submit"])

...因爲在:notCSS3 only supports simple selectors。

來源

2015-10-08 11:04:21 raina77ow

感謝您回答我的問題。當然，還有** no **''標籤，它們都有[type =「radio」]和[type =「submit」]。然後'input：not（[type =「radio」] [type =「submit」]）'選擇所有''標籤？ –

還有一個問題;做這兩個選擇器選擇**一個''標籤沒有'type'屬性**？ –

>然後輸入：not（[type =「radio」] [type =「submit」]）選擇所有標記？ - 不，它不，除非支持CSS4。如果是後者，那完全是因爲你提供'：not'與永遠不匹配的選擇器。 – raina77ow

此行似乎是無效的，因爲多個[]似乎並沒有通過W3C驗證服務對於CSS：

input:not([type="radio"][type="submit"])

這條線，然而，是有效的，只是不包括任何兩種類型的任何元素，但選擇任何其它是input：

input:not([type="radio"]):not([type="submit"])

我找不到它的任何證據的文檔中然而在:not選擇器上。如果要測試驗證，請繼續閱讀W3C驗證器的鏈接：https://jigsaw.w3.org/css-validator/。

現在，讓我們在一個片段

input { 
 
    border: 1px solid blue; 
 
} 
 
#valid input:not([type="radio"]):not([type="submit"]){ 
 
    border-color: red; 
 
} 
 
#invalid input:not([type="radio"][type="submit"]){ 
 
    border-color: red; 
 
}

<div id="valid"> 
 
    <pre><strong>Valid:</strong> input:not([type="radio"]):not([type="submit"])</pre> 
 
    <input type="text" /> 
 
    <input type="submit" /> 
 
    <input type="radio" /> 
 
</div> 
 
<div id="invalid"> 
 
    <pre><strong>Invalid:</strong> input:not([type="radio"][type="submit"])</pre> 
 
    <input type="text" /> 
 
    <input type="submit" /> 
 
    <input type="radio" /> 
 
</div>

來源

2015-10-08 10:32:16 somethinghere

在這裏，我只是嘗試

我想在下面的jsfiddle 4種方式，你可以通過看差測試這個

$(document).ready(function(){ 
 
    
 
    //applied using jquery 
 
    
 
    \t $('.usingJquery input:not([type="radio"],[type="submit"])').css({ 
 
     'background-color' : 'cadetblue', 
 
     'border' : 'dotted #7FFF00' 
 
    }); 
 
})

input { 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 

 
/*will apply the only first one so border and background will be applied all input types exluding radio type*/ 
 
input:not([type="radio"]) , input:not([type="submit"]){ 
 
    border:1px solid grey; 
 
    background-color : green; 
 
} 
 

 
/*this will not work as you can not apply multiple in same parantheses as i think*/ 
 
input:not([type="radio"][type="submit"]){ 
 
    border:1px solid green; 
 
} 
 

 
/*as i think for above code i tried using " , (comma)" seprator but it also didn't work*/ 
 
input:not([type="radio"],[type="submit"]){ 
 
    border:1px solid aqua; 
 
} 
 

 
/*this will work as you can see */ 
 
input:not([type="radio"]):not([type="submit"]){ 
 
    border:1px solid red; 
 
    background-color : yellow; 
 
}

<input type="radio"> 
 
<input type="submit"> 
 
<input type="file"> 
 
<input type="text"> 
 
<input type="checkbox"> 
 

 
    <div class="usingJquery"> 
 
     <input type="radio"> 
 
     <input type="submit"> 
 
     <input type="file"> 
 
     <input type="text"> 
 
     <input type="checkbox"> 
 
    </div>

，這裏是這個交代

See Demo

，什麼我發現是從的jsfiddle的2個問題被鏈接下面

Refer for input:not(selector):not(selector)

演示代碼
如果你想嘗試輸入：不使用（類型= 「無線電」] [類型= 「提交」]）選擇使用jquery用逗號「」分離爲您可以指

Refer for using jquery

來源

2015-10-08 10:50:21

這兩個選擇器使用「：not」有什麼區別？

回答

相關問題