开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS输入类型选择器-可能有“or”或“not”语法？

CSS输入类型选择器

CSS输入类型选择器用于根据HTML表单元素的类型来选择元素。这些选择器可以帮助开发者更精确地定位和样式化特定的表单元素。

基础概念

CSS选择器可以分为多种类型，其中输入类型选择器是基于HTML表单元素的type属性来选择元素的。例如：

input[type="text"] {
  /* 样式规则 */
}

相关优势

精确性：通过输入类型选择器，可以精确地定位到特定类型的表单元素，从而应用特定的样式。
可维护性：当表单元素的类型发生变化时，只需要修改HTML代码，而不需要修改大量的CSS代码。
可读性：输入类型选择器使得CSS代码更具可读性，便于其他开发者理解和维护。

类型

常见的输入类型选择器包括：

input[type="text"]：文本输入框
input[type="email"]：电子邮件输入框
input[type="password"]：密码输入框
input[type="checkbox"]：复选框
input[type="radio"]：单选按钮
input[type="submit"]：提交按钮
input[type="button"]：普通按钮

应用场景

输入类型选择器常用于以下场景：

表单样式化：为不同类型的表单元素应用不同的样式，提升用户体验。
表单验证：结合JavaScript进行表单验证，确保用户输入的数据符合要求。

可能遇到的问题及解决方法

问题：CSS输入类型选择器是否有“or”或“not”语法？

CSS本身没有直接的“or”或“not”语法来组合多个输入类型选择器，但可以通过其他方式实现类似的效果。

解决方法

使用逗号分隔多个选择器：
使用逗号分隔多个选择器：
上述代码表示选择所有类型为text或email的输入框，并应用相同的样式规则。
使用:not()伪类：
使用:not()伪类：
上述代码表示选择所有类型不为submit的输入框，并应用相同的样式规则。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Input Type Selectors</title>
  <style>
    input[type="text"], input[type="email"] {
      border: 1px solid #ccc;
      padding: 8px;
      margin: 4px 0;
    }

    input:not([type="submit"]) {
      background-color: #f9f9f9;
    }

    input[type="submit"] {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form>
    <input type="text" placeholder="Enter text">
    <input type="email" placeholder="Enter email">
    <input type="password" placeholder="Enter password">
    <input type="checkbox"> Check me
    <input type="submit" value="Submit">
  </form>
</body>
</html>

参考链接

通过上述方法，可以有效地使用CSS输入类型选择器来实现精确的样式化，并解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

机制和原理——语法基础

CSS的基本目标是让浏览器以指定的特性去绘制页面元素，这些是由属性和属性值的定义来实现的。

01

CSS入门笔记－初识CSS

引言上次给大家带来了html部分的笔记，大家的反馈让我非常开心?。这次给大家带来css部分的第一篇笔记，由于本人比较蠢，学的很慢，而且css部分内容非常的细、广，需要不断code，才能体会其中细节

06

[OHIF-Viewers]医疗数字阅片-医学影像-es6-Element.querySelector()

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelector

02

CSS in JS的好与坏

CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些 .css， .scss或者 less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in-JS不是一种很新的技术，可是它在国内普及度好像并不是很高，它当初的出现是因为一些 component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案。

01

初学Qt不会样式表怎么办，打包好的Qt样式表一键生成送给你。

很多人应该和我一样，想做界面才接触的Qt，结果就是做不出来华丽的界面，想给控件上个色？不会，百度半天，好不容易给控件添加了背景色，下一个控件又不会了，别急，这次福利来了，我将平时用到的样式表做了一个总结，并做了一个一键生成，调节数据就可以实时显示，里面包括了Label，LineEdit，PushButton，CheckBox，RadioButton，ScrollBar，Slider，Progressbar，Tabwidget，ToolBox，TabWidget控件的自定义。代码很简单，就是重复写槽函数，但其对于新手的学习很有帮助，避免了盲目，大量的通过百度数据拼接样式表。一来方便学习，所以参数都写在左下角，方便了解到使用了什么生成了什么，二来不用重复造轮子，调节后，可直接将左下角生成的QSS代码复制到qt的样式表里面即可显示效果。可能有一些人会说这是一种偷懒，让人逐渐不想学习，只能说智者见智仁者见仁吧。

07

你真懂 CSS 吗？

其一，HTML Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rules ；

01

通用 CSS 笔记、建议与指导！

无论编写什么文档，我们都应当维持统一的风格，包括统一的注释、统一的语法与统一的命名规范。

01

【每日一个云原生小技巧 #6】在 Prometheus 中使用 Label Selectors

Prometheus 中的标签选择器（Label Selectors）是一种强大的工具，用于过滤和选择特定的指标，以便更精确地查询和分析监控数据。标签选择器可以帮助您定位感兴趣的指标并提高查询效率。以下是有关 Prometheu s标签选择器的详细介绍以及一些使用技巧：

01

『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。

CSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。

01

『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。

CSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。

02

前端入门23-CSS预处理器（Less&Sass）声明正文-CSS预处理（less&Sass）

这里就讲讲这两个问题，写过 CSS 应该就会比较清楚，虽然我才刚入门，但在写一些练手时就已经有点感觉了：写 CSS 后，很难维护，维护基本要靠注释来，而且由于 HTML 文档中标签的嵌套层次复杂，导致写 CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。

03

前端基础-CSS样式的优先级

伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承

01

爬虫网页解析之css用法及实战爬取中国校花网

我们都知道，爬虫获取页面的响应之后，最关键的就是如何从繁杂的网页中把我们需要的数据提取出来，

01

【CSS】248-天天都用CSS，你真的懂CSS吗？

其一，HTML Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rules ；

02

玩游戏学 CSS，哎，我就是玩儿！

堂友们，大家好！我是你们的食堂老板，童欧巴。周末了，我们聊点轻松的话题，之前在社区中发现了几款不错的学习 CSS 的游戏，体验之后发现不错，和大家分享一下。

01

CSS的四种基本选择器和四种高级选择器[通俗易懂]

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

01

JavaScript入门

2看文字样式 T 单击目标文字，菜单栏下面查看文字效果---释放选择：ctrl + enter或选择其他工具

02

CSS语法与规则 — 重学CSS

进入重学 CSS 的第一步，首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过，要想建立知识体系骨架，我们需要一个完备性更权威，更全的线索。但是 CSS 现在标准的状态非常复杂，所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准，能把 CSS 的一切都浓缩在内。

04

软件测试/测试开发|Python selenium CSS定位方法详解

CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活，是前端开发中常用的定位元素的方式。

01

CSS快速入门（一）

目录 CSS快速入门简介语法结构如何注释引入方式选择器简介选择器列表选择器的优先级基本选择器标签选择器类选择器 id选择器通用选择器（不重要）组合选择器后代选择器儿子选择器相邻选择器弟弟选择器属性选择器语法示例分组与嵌套伪类选择器语法示例标准伪类索引选择器参考表网站分享 CSS快速入门 📷 简介层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来

02

CSS 预编译语言 Sass 快速入门教程

CSS 作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规范，编写的 CSS 代码会非常冗余且难以维护。

04

第208天：jQuery框架封装（一）

1.1冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

04

如何利用CSS选择器抓取京东网商品信息

前几天小编分别利用Python正则表达式、BeautifulSoup选择器、Xpath选择器分别爬取了京东网商品信息，今天小编利用CSS选择器来为大家展示一下如何实现京东商品信息的精准匹配~~

04

科普 | 一文详解 CSS-in-JS

几年前，如果有人提到用 JavaScript 编写 HTML 作为构建大型网站的一种方式，很多开发者会当这作不可理喻的想法，但是现在，使用 React、Vue 和 Angular 框架为组件开发的应用正在慢慢替代传统的 Web 开发。

02

自动化测试——selenium（环境部署和元素定位篇）

一、什么是selenium？ > 一个web自动化测试工具；二、主流的自动化工具： > QTP:收费支持（支持web、桌面软件自动化） > selenium:免费，开源只支持web项目 > Robot frameword: 基于Python扩展关键字驱动自动化工具注意：要是用selenium自动化工具，要先下载安装selenium 一、web自动化环境部署 1.1 selenium安装 1、安装在cmd 直接输入：pip install selenium 2、卸载：在cmd输入：pip uninstall selenium 3、查看： pip show selenium 或者 pip list pip 是python中包管理工具（可安装，可卸载，查看python工具），使用pip的时候必须联网有的输入 pip install selenium 会提示出现 ‘pip’ 不是内部或外部命令，也不是可运行的程序或批处理文件。产生这个原因python环境内部没有 pip 路径，则需要我们收到导入解决方法： 1、找到我们python工具中的pip所在文件夹，复制其路径

01

CSS的选择器

CSS基础选择器标签选择器就是用标签名来当做选择器。 1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2）不管这个标签藏的多深，都能够被选择上。 3）选择的是所有的，而不是某一个。所以是共性，而不是特性。 id选择器 #表示选择id 1 #lj1{ 2 font-size: 60px; 3 font-weight: bold; 4 color:black; 5 } 1）任何的标签都可以有

02

CSS笔记(3)

刚刚学习完了CSS的文本属性,感觉还不是很难但是知识点还挺多的,偶尔会忘记一些...发现做笔记还是很有用的,我经常会翻自己写过的文章来看,感觉其实html不算太难,但是要记得东西真的好多好多啊...幸好我记了笔记.

01

一个合格的初级前端工程师需要掌握的模块笔记

<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

01

分享15个有用的，你可能还不知道的CSS小技巧，建议每个前端开发者都了解下

为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。

04

VueJS 开发常见问题集锦

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。

04

2018年各大互联网前端面试题三（阿里）

三月份有很多朋友辞职跳槽，也遇到了许许多多的面试题，在交流群里和网站上总结了一些常见的面试题，细细分析，其实基本都是万变不离其宗，所有的问题都是从某一技术点的基础出发，综合考量，如果懂得了这项技术的原理所在，题目答起来内容都差不多能答对。基础简单介绍一下自己，为什么选择做前端？说下你所在的EPI实验室和CTG工作室是干什么的？介绍下你最近的项目？说出你觉得自己身上最优秀的能力？说出你未来的规划？你最近有没有什么想要学习的技术？你有什么要问我的？布局相关 position的值有哪

03

selenium css定位

selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法

00

软件测试|selenium css定位

selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法

02

css3-not选择器妙用

css3中增加了not选择器，可以用于排除不符合某些规则的元素，下面我从语法，兼容性，可能的实践三个角度更好的学习使用它。

02

CSS框架

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。就是它开发了一套现成的CSS样式，包括排版布局、按钮、表单、等，你只需要按照它的规则用好类名，这样可以方便团队快速开发Web站点，减轻前端设计师的工作。有名的框架有Twitter的Bootstrap、Foundation、960gs、以及Semantic UI等。

02

前端入门系列之CSS

CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。

01

CSS入门

我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style> 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？

02

CSS3 E:nth-child、E>F、E~F、E+F以及属性选择器

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素 3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 4、E > F E元素下面第一层子集 5、E ~ F E元素后面的兄弟元素 6、E + F 紧挨着的后面的兄弟元素

02

大型编程电视剧连载 | CSS知识点硬核整理归纳（一）

本文需要一点HTML的基础，没有基础的小伙伴可以看我的这篇文章：前端HTML万字血书大总结，来看看你入门了吗？

01

web自动化04-css定位

element = driver.find_element_by_css_selector(css策略)

06

[ISUX译]我为css变量狂 - 腾讯ISUX

几个星期前，CSS Variables ——CSS 变量草案发布在了W3C官方 ,更准确的应该叫CSS 自定义属性，目前在Chrome Canary 版里面已经支持，开启该功能见附[1] 当Chrome浏览器工程师Addy Osmani第一时间把这消息发布在twitter后，遭到了数万人的否定、敌视和怀疑。于我而言，更多的感到是一个惊喜，因为这个功能实在让人太兴奋了。快速的扫了一遍之后，发现99%人抱怨的无外乎这两点：语法太丑和不够简洁 Sass 、Less早就有这些玩意了，不太care 虽然我承认我也

03

如何使用CSS伪类选择器

原文链接：https://www.sitepoint.com/css-is-where-has-pseudo-class-selectors/[1]

04

前端成神之路-CSS（选择器、背景、特性）

CSS选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

02

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

HTML作用单纯，只关注语义，比如< h1>是一级标题，< p>是一个段落，他不愿意去美化修饰，因为写起来麻烦，只能一行一行的修改。

02

爬虫选择器算法漫谈

爬虫选择器其实就是CSS选择器，和前端开发关系密切，这里先简单介绍一下，让没做过web开发的有个大概了解。

01

css基础第二弹

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法快速生成CSS样式语法

01

【Hello CSS】第五章-CSS的选择器与函数

在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟 CSS选择器（CSS Selectors）相关的内容，有兴趣的请继续往下看。

01

requests-html库render的使用

语法:response.html.render(script='js代码字符串格式')

02

隔壁厂员工进局子了！

我首先想到的就是黑客，每年都有那么一批 “有志之士”，利用自己的技术去攻击别人的电脑、违反网络安全。

03

CSS：页面美化和布局控制

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭