css :not() 选择器不支持其中的复杂选择器

Question

在CSS3中，:not()选择器和attribute contains selector都可用，但是在混合两者时出现问题，它不起作用。

.HTML：

<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

.CSS：

input[type='text']:not(input[id*='Date']) {
    display:none;
}

演示

谁能说出这里出了什么问题？

注意：我们没有更改标记的权限。

Answer 1

你不能

在 not 中使用两个选择器：

input[type='text']:not([id*='Date']) {
  display: none;
}

<input type='text' />
<input type='text' id="dasd_Date_asd" />

选择器级别 3 不允许在 ：not（） 伪类中只允许使用单个简单选择器。

Answer 2

您应该首先选择输入类型，然后切断类型ID具有值"Date"的输入。 您再次在 ：not（） 中提供输入作为选择器

试试这个。

     input[type='text']:not([id*=Date]) {
        display:none;
    }

<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

Answer 3

截至 2021 年，您的代码实际上可以工作，您可以在:not()语句中使用复杂的选择器。它适用于所有主流浏览器（https://caniuse.com/css-not-sel-list）

https://jsfiddle.net/o6x10ytc/