css选择器匹配没有属性x的元素[重复]

本文翻译自：css selector to match an element without attribute x [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

Can I write a CSS selector selecting elements NOT having a certain class or attribute? 我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗？ 9 answers 9个答案

I'm working on a CSS file and find the need to style text input boxes, however, I'm running into problems. 我正在研究CSS文件并发现需要设置文本输入框的样式，但是，我遇到了问题。 I need a simple declaration that matches all these elements: 我需要一个匹配所有这些元素的简单声明：

<input />
<input type='text' />
<input type='password' />

... but doesn't match these ones: ......但不符合这些：

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

Here's what I would like to do: 这就是我想做的事情：

input[!type], input[type='text'], input[type='password'] {/* styles here */
}

In the above CSS, notice the first selector is input[!type] . 在上面的CSS中，注意第一个选择器是input[!type] 。 What I mean by this is I want to select all input boxes where the type attribute is not specified (because it defaults to text but input[type='text'] doesn't match it). 我的意思是我想选择未指定type属性的所有输入框（因为它默认为文本但input[type='text']与它不匹配）。 Unfortunately, there is no such selector in the CSS3 spec that I could find. 不幸的是，我找不到CSS3规范中没有这样的选择器。

Does anyone know of a way to accomplish this? 有谁知道这样做的方法？

#1楼

参考：https://stackoom.com/question/6Quy/css选择器匹配没有属性x的元素-重复

#2楼

只是想添加到这个，你可以使用selectivizr在oldIE中使用：not selector： http ：//selectivizr.com/

#3楼

:not selector ：不是选择器

input:not([type]), input[type='text'], input[type='password'] {/* style here */
}

Support: in Internet Explorer 9 and higher 支持：在Internet Explorer 9及更高版本中

#4楼

For a more cross-browser solution you could style all inputs the way you want the non-typed, text, and password then another style the overrides that style for radios, checkboxes, etc. 对于更多跨浏览器的解决方案，您可以按照您希望的方式设置所有输入的样式，非文本和密码，然后另一种样式覆盖无线电，复选框等样式。

input { border:solid 1px red; }input[type=radio],
input[type=checkbox],
input[type=submit],
input[type=reset],
input[type=file] { border:none; }

- Or - - 要么 -

could whatever part of your code that is generating the non-typed inputs give them a class like .no-type or simply not output at all? 你生成非类型输入的代码的任何部分都可以为它们提供类似.no-type或者根本不输出它们？ Additionally this type of selection could be done with jQuery. 此外，这种类型的选择可以使用jQuery完成。

css选择器匹配没有属性x的元素[重复]相关推荐

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？
[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配? 有选择器: div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出来组成 ...
2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师笔记: 选择器以及一条或多条声明写在<head><style>之间</style></head> font-size ...
css选择类的第几个元素,css选择器怎么选取第几个元素
css选择器选取第几个元素的方法:1.使用"first-child"选择器选取属于其父元素的首个子元素:2.使用"last-child"选择列表中的最后一个标签 ...
爬虫css选择器，选择属性
有一个网页是这样的,我向提取onclick里的值. 这时用attr, 如下代码: if selector.css(".con10 a.but_alert").get():id = ...
css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示补充:display与 visibility属性不同, ...
【油猴脚本】生成纯元素CSS选择器（附开发笔记）
脚本介绍用途常见的CSS选择器: #gatsby-focus-wrapper > div > div > div.Box-nv15kw-0.Flex-arghxi-0.layou ...
css前缀匹配,CSS选择器子串
Selenium允许匹配部分字符串以定位特定的Web元素.有三种机制可以使用CSS Selector完成字符串的匹配. 匹配前缀匹配后缀匹配子字符串下面通过一个例子详细介绍每种机制.在开始之前, ...
如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
html类选择器使用在什么场景,CSS选择器
**关键字: ** ** 1.css选择器使用场景; ** ** 2.css选择器优先级; ** 3. first-child和:first-of-type 1.class 和 id 的使用场景? c ...

css选择器匹配没有属性x的元素[重复]

#1楼

#2楼

#3楼

#4楼

css选择器匹配没有属性x的元素[重复]相关推荐

最新文章

热门文章