Question

这两个选择器之间有什么区别？

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

是否会选择没有<input>属性的type代码？

我读过：

Answer 1

引用the Selector Level 4 docs：

否定伪类:not()是一个功能性伪类   选择列表作为参数。它代表了一个不是的元素   由其论证代表。

注意：在选择器级别3中，只允许使用一个简单选择器   作为:not() 的参数。

这就解释了为什么......

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

任何没有实现这部分CSS4规范的浏览器都不支持

...（据我所知，目前还没有人这样做;它只是一个工作草案，毕竟）。但是这个选择器的逻辑也存在缺陷：即使普遍支持语法，也应该写成......

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

请参阅[foo][bar]规则被视为 {em> foo和bar的任何元素的要求。但是（当然！）任何输入都不可能同时属于radio和submit类型。

底线：你必须使用......

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

...因为:not中的CSS3 only supports simple selectors。

Answer 2

这一行似乎无效，因为多个[]似乎没有通过CSS的W3C验证服务：

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>

Answer 3

这里我只想尝试差异

我在下面的jsfiddle中尝试了4种方法，你可以看到

中的注释

$(document).ready(function(){
    
    //applied using jquery
    
   	$('.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)

如果你想尝试输入：not（[type =“radio”] [type =“submit”]）选择器使用带逗号的jquery “，”您可以参考的分离

Refer for using jquery

这两个选择器使用“：not”有什么区别？

3 个答案: