这两个选择器使用“：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”有什么区别？

回答

相关问题