如何在 CSS 中正确使用 not 选择器 [重复]
Posted
技术标签:
【中文标题】如何在 CSS 中正确使用 not 选择器 [重复]【英文标题】:How to use the not selector correctly in CSS [duplicate] 【发布时间】:2015-12-16 04:18:42 【问题描述】:我了解在 CSS 中使用 :not() 的基本要点,但它似乎对我不起作用。我正在尝试做类似的事情:
input[type=text][readonly]:not(.class1, .class2)
background-color: #DDDDDD;
color: #1E1E1E;
但这似乎对我不起作用。每当我阅读有关此的任何信息时,它都会有input:not(.class1, .class2)
之类的示例,但标签和:not()
部分之间没有任何内容。假设我写的语法不正确,我是否正确?如果我使用:not()
,我可以不再定义标签元素吗?
【问题讨论】:
来自克里斯的东西:css-tricks.com/almanac/selectors/n/not 我之前看过了,好像没有我要找的信息,还是我错了? 【参考方案1】:您唯一的问题是您在 :not()
中传递了两个选择器,每个语句只使用一个。
目前扩展参数 (foo, bar)
不被任何浏览器支持。
使用
:not(.class1):not(.class2)
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
input[type=text][readonly]:not(.class1):not(.class2)
background-color: #DDDDDD;
color: #1E1E1E;
<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">
【讨论】:
谢谢!我会试试 :) 我还听说:not()
在 IE 中不起作用,这是真的吗?
@user3334871 仅来自版本 9
是指低于版本 9 还是高于版本?不幸的是,我的申请必须支持 IE9 一年左右。
@user3334871 IE9 会对以上内容感到满意。您可以随时进行测试。【参考方案2】:
:not
只接受简单的选择器,而不接受它们的列表。
所以你的选择器应该是这样的:
input[type=text][readonly]:not(.class1):not(.class2) ...
【讨论】:
【参考方案3】:结合使用:
:not(.class1):not(.class2)
:not
选择器不是函数。就像任何其他选择器接受其他选择器一样。
你的最终 CSS 应该是:
input[type=text][readonly]:not(.class1):not(.class2)
/* Styles */
片段
input[type=text][readonly]:not(.class1):not(.class2)
background-color: #DDDDDD;
color: #1E1E1E;
<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>
【讨论】:
以上是关于如何在 CSS 中正确使用 not 选择器 [重复]的主要内容,如果未能解决你的问题,请参考以下文章
Scrapy:: 如何在 CSS 选择器中使用“not”来跳过元素