是否有 CSS 不等于选择器?

     2023-03-05     151

关键词:

【中文标题】是否有 CSS 不等于选择器?【英文标题】:Is there a CSS not equals selector? 【发布时间】:2011-03-22 04:54:05 【问题描述】:

在 CSS 中是否有类似 != (不等于)的东西? 例如,我有以下代码:

input 
 ... 
 ...

但是对于某些输入,我需要取消它。我想通过将“reset”类添加到输入标签来做到这一点,例如

<input class="reset" ... />

然后简单地从 CSS 中跳过这个标签。

我该怎么做?

我能看到的唯一方法是在输入标签中添加一些类,并重写 CSS 如下:

input.mod 
 ...
 ...

【问题讨论】:

你回答了你的问题,我想。将样式放入 input.mod 并在所需的输入标签中添加类“mod”。 【参考方案1】:

在 CSS3 中,您可以使用 :not() 过滤器,但并非所有浏览器都完全支持 CSS3,所以请确保您知道自己在做什么 supported by all major browsers(已经有一段时间了;这是一个答案...)。

例子:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

和 CSS

input:not(.avoidme)  background-color: green; 

注意:不再需要这种解决方法;我把它留在这里作为上下文。

如果你不想使用 CSS3,你可以在所有元素上设置样式,然后用一个类重置它。

input  background-color: green; 
input.avoidme  background-color: white; 

【讨论】:

天啊...我知道它的存在 :) 是的,它是!谢谢。 缺乏支持主要来自 IE8(和旧版本)。如果有人对 polyfill 感兴趣:selectivizr.com @Guru:您可以链接多个 :not() 选择器:input:not(.avoidme):not(.avoidmetoo) 将避免使用任一类的元素,input:not(.avoidme.andme) 将避免使用 both 类的元素。 @TomasLycken,实际上,在 CSS 中使用多个选择器是一个棘手的问题,例如:not(.this.that) 可以工作,但是如果您执行诸如 :not(.this, .that) 之类的操作,您会跌倒,您必须将它们串起来,例如::not(.this):not(.that)。我知道你可能知道这一点,我正在努力帮助未来的读者:) 在这里为未来的读者留下评论:@SamSwift웃 的评论仍然准确,但support for lists is (maybe) coming in the future。不过目前,:not() 中仅支持单个选择器。【参考方案2】:

你也可以通过定位这样的属性来解决这个问题:

input:not([type=checkbox]) width:100%;

在这种情况下,所有非“复选框”类型的输入都将具有 100% 的宽度。

【讨论】:

【参考方案3】:

有趣的是,刚刚尝试使用 JQuery 选择 DOM 元素,它可以工作! :)

$("input[class!='bad_class']");

此页面有 168 个没有类 'comcopy' 的 div

$("div[class!='comcopy']").length => 168
$("div[class!='.comcopy']").length => 168

【讨论】:

[attr!="value"] 是一个 jQuery-only 选择器 api.jquery.com/attribute-not-equal-selector 这和 CSS 有什么关系? @devlincarnate "CSS" 选择器已融入 JS (circa 2013),因此人们会搜索它。【参考方案4】:

而不是 class="reset" 您可以通过设置 class="valid" 来反转逻辑 您可以默认添加它并删除该类以重置样式。

所以从你的例子和托马斯的例子来看

input.valid 
 ... 
 ...

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>

【讨论】:

我认为能够通过应用到一个类来“重置”的整个想法是不应该具有默认样式的元素数量大大超过了应该的元素数量,所以 OP 没有'不想将 any 类应用于大多数元素。【参考方案5】:

CSS3 有:not(),但还没有在所有浏览器中实现。不过,它是在 IE9 平台预览版中实现的。

input:not(.reset)  

http://www.w3.org/TR/css3-selectors/#negation

与此同时,您必须坚持使用老式方法。

【讨论】:

【参考方案6】:

您也可以通过仅在 CSS 中“还原”重置类的更改来做到这一点。

INPUT  
    padding: 0px;

INPUT.reset 
    padding: 4px;

【讨论】:

CSS 是不是有 :blur 选择器(伪类)?

...类)?【英文标题】:DoesCSShavea:blurselector(pseudo-class)?CSS是否有:blur选择器(伪类)?【发布时间】:2012-07-2701:02:17【问题描述】:我知道有一个:focus选择器。我似乎找不到:blur选择器的使用或文档。有吗?【问题讨论】:【参考... 查看详情

是否有 CSS“haschildren”选择器? [复制]

】是否有CSS“haschildren”选择器?[复制]【英文标题】:IsthereaCSS"haschildren"selector?[duplicate]【发布时间】:2012-08-2518:36:16【问题描述】:可能重复:IsthereaCSSparentselector?是否有一个css选择器我只能在子元素存在时使用?考虑... 查看详情

css

...对应class属性。p.one选中p元素并且p元素下的class属性的值等于oneclass属性下的p元素等于one的p元素的值。。。。。。id选择器id名称只能一个元素,只能对应一个页面层级选择器主要有上下选择器,可以上下标签对应使用。后代选... 查看详情

是否有用于溢出的 css 伪选择器?

】是否有用于溢出的css伪选择器?【英文标题】:Isthereacsspseudoselectorforoverflow?【发布时间】:2012-10-2404:08:33【问题描述】:我正在尝试根据其父div是否溢出来改变其样式。.pDivdisplay:block;width:300px;height:100px;border:1pxsolidrgb(0,0,0);.cDi... 查看详情

是否有一个 css 选择器可以选择当前元素之外的元素? [复制]

】是否有一个css选择器可以选择当前元素之外的元素?[复制]【英文标题】:Isthereacssselectorwhichselectsanelementoutsidethecurrentelement?[duplicate]【发布时间】:2016-02-2718:53:42【问题描述】:代码比文字更能解释<divclass="parent"><spancla... 查看详情

是否有针对 IE10 的特定 CSS 选择器?

】是否有针对IE10的特定CSS选择器?【英文标题】:AreThereSpecificCSSSelectorsTargetingIE10?【发布时间】:2011-11-1108:59:42【问题描述】:由于IE在版本10中摆脱了条件cmets,我迫切需要找到专门针对IE10的“CSShack”。请注意,被“黑”的必... 查看详情

是否有按类前缀的 CSS 选择器?

】是否有按类前缀的CSS选择器?【英文标题】:IsthereaCSSselectorbyclassprefix?【发布时间】:2011-03-2107:14:36【问题描述】:我想将CSS规则应用于其中一个类与指定前缀匹配的任何元素。例如我想要一个适用于类以status-开头的div的规... 查看详情

是否有可以在 Firefox 中测试 CSS 选择器的插件?

】是否有可以在Firefox中测试CSS选择器的插件?【英文标题】:Isthereanaddonwhichyoucantestcssselectorsinfirefox?【发布时间】:2011-01-1314:33:57【问题描述】:我想知道Firefox中是否有这样的插件,您可以在其中测试css路径以检查它们是否找... 查看详情

是否有可以在 C# 中使用的类似 jQuery 的 CSS/HTML 选择器?

】是否有可以在C#中使用的类似jQuery的CSS/HTML选择器?【英文标题】:IsthereajQuery-likeCSS/HTMLselectorthatcanbeusedinC#?【发布时间】:2010-12-0712:40:46【问题描述】:我想知道是否有可以在C#中使用的类似jQuery的css选择器。目前,我正在使... 查看详情

是否可以将 CSS 选择器中的重要属性值设为不重要的属性值?

】是否可以将CSS选择器中的重要属性值设为不重要的属性值?【英文标题】:IspossibletomakeanimportantpropertyvaluefromCSSselectoranonimportantone?【发布时间】:2013-09-2419:39:53【问题描述】:是否可以将CSS选择器中的重要属性值设为不重要的... 查看详情

css3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我。和我一样的小白们希望能相互学习,谢谢了... 查看详情

CSS加号选择器的CSS替代品?

...布时间】:2016-04-0218:52:39【问题描述】:我正在尝试确定是否有CSS替代方案可以替代使用CSS加号选择器,以便我的css滑块可以在不支持加号选择器的旧浏览器中使用。我正在寻找一个CSS替代品。但是有没有一种方法可以检测不支... 查看详情

测试浏览器是不是支持 CSS 选择器

...器【英文标题】:TestifabrowsersupportsaCSSselector测试浏览器是否支持CSS选择器【发布时间】:2014-02-0109:50:19【问题描述】:真的很简单:如何最准确地测试浏览器是否支持某个CSS选择器?我目前有一些CSS代码,通过在CSS中使用:checked... 查看详情

jQuery 中是不是有类似于 :eq() 的标准 CSS 选择器?

...文标题】:IsthereastandardCSSselectorsimilarto:eq()injQuery?jQuery中是否有类似于:eq()的标准CSS选择器?【发布时间】:2013-02-0714:04:20【问题描述】:不知道有没有CSS选择器可以和下面一行一样(jQuery代码):.tab_cadre_central.top:eq(0)tabletbodytrt 查看详情

是否有不区分大小写的 jQuery :contains 选择器?

】是否有不区分大小写的jQuery:contains选择器?【英文标题】:IsthereacaseinsensitivejQuery:containsselector?【发布时间】:2010-09-1607:07:27【问题描述】::containsjQuery选择器是否有不区分大小写的版本,或者我应该通过循环所有元素并将它... 查看详情

将 CSS 选择器转换为 XPATH

...lectorstoXPATHqueries上看到了一篇在线文章,所以我想弄清楚是否有任何.NET库可以进行映射/转换。如果您对如何执行映射有任何参考或任何想法(如果库不可用),请告诉我。【问题讨论】:你可以试试这个:bitbucket.org/Mos 查看详情

计算css文件中选择器的数量

...ctorsinacssfile【发布时间】:2011-07-1020:25:49【问题描述】:是否有现有的插件/应用程序/程序/脚本/任何东西来分析和计算文件的css选择器?我想检查我的css文件在IE中不起作用的原因是否是因为我的选择器计数超过4095(我很确定... 查看详情

css属性选择器

...d]”。以下同。)p[title]{color:#f00;}E[att=val]匹配所有att属性等于“val”的E元素div[class=”error”]{color:#f00;}E[att~=val]匹配所有att属性具有多个空格分隔的值、 查看详情