CSS:多属性选择器

2024-06-19

我想设置“电子邮件”和“密码”类型的表单输入样式,但不设置其他任何样式。我正在想象类似以下的事情:

input[type="email"][type="password"] {
    ....
}

然而,属性选择器的工作方式似乎将其解释为“输入,其中类型同时是‘电子邮件’and'密码'”。我要做的是“输入类型恰好是‘电子邮件’or'password'”。当然,没有什么可以同时是电子邮件类型和密码类型的。

是否可以编写一个 CSS 规则or跨越多个不同的属性选择器?

作为参考,HTML 看起来像:

<form id="login" onsubmit="return fadeaway()">
    <fieldset>
    <input type="email" placeholder="username"/> <br />
    <input type="password" placeholder="password"/> <br />
    </fieldset>
</form>

只需这样做:

input[type="email"], input[type="password"]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:多属性选择器 的相关文章

  • 将多个 div 与父 div 的底部对齐

    我在父 div 中有多个子 div 使用CSS 是否可以将所有子 div 垂直对齐到父容器的底部 以便显示如下内容 子 div 的高度未知 动态 p Top of page p div div class message Message 4
  • 获取可拖动元素的ID

    有没有办法在原生 HTML5 拖放中获取具有属性的元素的 iddraggable true 起初我认为从可拖动容器中获取 id 是标准做法 但实际上它始终是从您开始拖动的子元素中获取 id 这非常烦人 这是一个小提琴 https jsfid
  • 通过 CSS 转换平滑由 javascript 驱动的快速位置变化?

    我认为这是一个很遥远的事情 但值得一问 我有一些类似于许多移动应用程序 例如 Facebook 中的左侧菜单的东西 当您按下 打开 按钮时 它可以顺利打开 在我的例子中 使用 CSS 过渡 但我还实现了拖出您可以从屏幕左侧滑动以拖出菜单的功
  • CSS 中水平 div 之间的自动间距

    我进行了很多搜索 但我并不幸运地找到了我所追求的解决方案 问题是 我创建了一个主 div 宽度 100 其中有几个内部 div 你可以在这里看到它 http jsfiddle net EAkLb 1 http jsfiddle net EA
  • 背景图像动画使用css3还是jquery? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 谁能帮我了解如何像这个网站上那样为背
  • React - 防止标签切换时焦点脱离模式

    我自己构建了一个反应模式 当我在模式打开时按 Tab 键时 焦点仍然转到背景页面 如何将焦点限制在模态框内的组件内 下面的逻辑应该是什么 onKeyPress e if e keyCode 9 e preventDefault logic
  • 表排序器,无法正确按日期排序

    如果存在空格 表排序器的行为是否会有所不同 我对 tablesorter 还很陌生 但有人要求我快速将其添加到客户网站 特别是允许他们按发布日期排序 据我所知 日期 例如 2012 年 5 月 14 日 被读取为文本 因此我需要添加一个解析
  • 如何在 A4 纸张大小的页面中制作 HTML 页面?

    是否有可能使 HTML 页面的行为类似于 MS Word 中的 A4 大小的页面 本质上 我希望能够在浏览器中显示 HTML 页面 并以 A4 尺寸页面的尺寸概述内容 为了简单起见 我假设 HTML 页面仅包含文本 没有图像等 并且不会有
  • 使用 CSS 将多个内联块居中并将最后一行向左对齐

    我想水平居中一些内联块 但同时让它们在最后一行左侧对齐 见下文 问题是我实现了这样的目标 http jsfiddle net 5JSAG http jsfiddle net 5JSAG 1 2 3
  • CSS - 将 div 与文本框右侧对齐

    div div style width 250px padding 20px 6px 6px 6px div div
  • 无法在媒体查询中设置 Shadow dom 中元素的样式

    In my styles app theme html我正在尝试更改菜单图标的大小paper drawer panel在媒体查询中 该元素位于index html 中 由于它位于 Shadow dom 中 我似乎无法访问它 我尝试过 可能不
  • 如何使用 webpack 2 分离 css 文件中的 less 文件?

    我可以编译页面上的 less通过 webpack2 但我无法将 less 文件编译成 CSS 文件 webpack config js var path require path var webpack require webpack va
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 具有 dropdown-menu-right 类的下拉菜单未向右对齐

    我有以下导航栏结构 current user username 来自我的模板系统 ul class navbar nav mr auto mt 2 mt lg 0 ul div class dropdown show a class dro
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色

随机推荐