CSS选择该元素之后所有相同类型的元素

2024-01-10

我有这个代码:

<fieldset id="login">
 <input type="text">
 <input type="password">
 <input type="checkbox" id="inline_invisible">
 <label for="invisible">Login invisible</label>
 <input type="checkbox" id="remember">
 <label for="remember">Remember me</label>
</fieldset>

在其中一个输入框获得焦点之前,标签不应该显示,所以我有这个 CSS:

#login input:focus + input + label {
   display:inline-block;
}

但当密码框处于焦点状态时,它仅选择第一个标签,而不选择第二个标签,并且对第一个输入框不执行任何操作。我应该怎么办?请仅使用 CSS,我无法更改 html。

谢谢。


Try

#login input:focus ~ label  {display:inline-block;}

plus(+) 选择相邻的兄弟姐妹,而 ~ 寻找下一个兄弟姐妹

通用兄弟选择器参考:https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

相邻同级选择器参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

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

CSS选择该元素之后所有相同类型的元素 的相关文章

  • 水平居中包含浮动 li 元素的

    我一直在尝试制作一个带有悬停下拉菜单的水平导航栏 我已经让它工作了 但是为了让 中的所有元素并排 水平 它们必须应用 float left 有什么办法让他们回到中心吗 另外 我的 CSS 编码风格 正确吗 我觉得我做错了 谢谢 HTML d
  • DIV 内的右对齐按钮

    作为一名后端开发人员 我感觉更舒服 但我有一个样式问题困扰着我 我已经发布了我的场景示例here http jsfiddle net jDaM8 1 我正在创建一个 div 它根据单击按钮显示 隐藏以显示特定项目的详细信息 该部分工作正常
  • rvest如何通过id选择特定的css节点

    我正在尝试使用 rvest 包从网页中抓取数据 简单来说 html 代码如下所示 div class style div
  • TransitionEnd 事件未触发?

    我有多个元素 每个元素都以 某种程度上 持续时间进行动画处理 我使用 CSS3 过渡 jQuery 库和transitionend辅助函数来自大卫 沃尔什 https davidwalsh name css animation callba
  • 禁用输入字段上的文本选择

    我正在使用 IBM Worklight HTML5 CSS3 和 javascript 开发混合应用程序 有没有可能的方法来禁用输入字段上的文本选择 我的屏幕上有一个用户名和密码字段 并且希望禁止用户在输入字段中选择文本 另外 应禁用复制粘
  • 隐藏滚动条,但仍然可以滚动

    我希望能够滚动整个页面 但不显示滚动条 在谷歌浏览器中它是 webkit scrollbar display none 但 Mozilla Firefox 和 Internet Explorer 似乎不是这样工作的 我也在 CSS 中尝试过
  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • HTML5 数据库存储(SQL lite) - 几个问题

    你好 我在网上找不到足够的关于 HTML5 数据库存储使用示例 CRUD 的初学者资源 我正在像这样打开 创建 我的数据库 var db document ready function try if window openDatabase
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳
  • 如何对基于 HTML5-JavaScript 的视频播放器进行快照?

    实际上 我有一个带有 JavaScript 函数的 HTML5 页面 可以让我播放 wmv 视频文件 我需要在视频播放时 有暂停或没有暂停 拍摄快照并以任何图像格式 JPG 或 BMP 保存 任何帮助将不胜感激 谢谢
  • 角度按钮单击旋转图标

    我有以下按钮
  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像
  • 纯CSS代码,没有绝对定位

    我试图想出一个纯CSS代码 就像你在电视上看到的那样 仅not粘在屏幕底部 我已经找到了涉及 JS 的东西 但我正在努力避免 JS 我还发现了一些其他人创建的纯 CSS 代码 但这些的问题在于它们都使用position absolute 这
  • 显示仅允许数字和小数点的输入?

    有什么方法可以定义一个
  • 以编程方式打开网页并以字符串形式检索其 html 包含内容

    我有一个 Facebook 帐户 我想提取我朋友的照片及其个人详细信息 例如 出生日期 就读学校 等 我能够提取我每个朋友帐户的 Facebook 首页的地址 但我不知道如何以编程方式打开我每个朋友首页的网页并将 html 包含保存为字符串
  • JavaFX:在 WebView img 标签中未加载本地图像

    以下是我的代码 一切安好 我可以加载远程页面 我可以放置 HTML 内容 但我的img标签显示一个X标志表示无法加载图像 Note 我的图像与类位于同一个包中JavaFX在 Smiley 文件夹中 我可以列出所有图像 这意味着路径没有问题
  • 在 jQuery 中获取最接近元素的形式

    我编写了这个 js jquery 脚本来检查表单中的所有复选框 它工作得很好 但是这会检查页面上的所有复选框 无论它们是什么表单包装器 这是函数 function toggleCheck state var checkboxes jQuer
  • 使用 node-sass 监视整个目录时指定输出文件名

    目前 我可以在查看单个 SCSS 文件时使用 package json 文件中的 node sass build 命令指定文件名 sass build node sass src scss main scss dist css main m
  • localStorage 获取 NULL?

    我不知道为什么 因为我之前已经这样做过并且工作正常 我认为这可能是因为浏览器问题 错误 localStorage setItem foo bar alert localStorage getItem foo 我使用的是 Firefox 3

随机推荐