程序员经验分享-hwhale

用于获取前一个同级的 CSS 选择器[重复]

2024-01-12

有没有办法使用纯 CSS(3) 来选择具有特定类的元素的前一个同级元素？

i.e.:

html:

<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
      <div id='inner-box'></div>
</div>

css:

#box1{ /*some styling*/ }
#box2{ /*some styling*/ }

#box2.active .....

现在，当 #box2 有类时active我想选择并做一些风格#element-to-find。有办法实现这个吗？


ww 向 CSSWG 提出了多项提案[电子邮件受保护] /cdn-cgi/l/email-protection与前兄弟组合器一样的邮件列表：my one http://lists.w3.org/Archives/Public/www-style/2012Jan/1245.html（2012），另一个1 http://lists.w3.org/Archives/Public/www-style/2013Feb/0279.html, 2 http://lists.w3.org/Archives/Public/www-style/2013Apr/0074.html (2013).

塔布·阿特金斯 (Tab Atkins) 的常见回答是“我们已经有这方面的主题指示符”。用于选择后人前一个兄弟的（这对于前一个兄弟的组合器来说是微不足道的，例如.example - UL > LI），他建议使用:matches()函数伪类，例如:matches(!UL + .example) > LI。主题指标和:matches()目前处于草案状态，还不能在现实世界中使用。

所以你应该添加一个常规类element-to-find元素或（如果您的active类不是通过 JS 添加的）使用 JavaScript 来模拟 previous-sibling-combinator 功能。

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

css

class

DOM

element

用于获取前一个同级的 CSS 选择器[重复] 的相关文章

  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成

  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto

  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto

  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签

  • javascript中怪异模式的元素宽度？

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将

  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静

  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式

  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用

  • javascript:window.print() 打印 2 页，而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

  • 我应该使用课程吗？ （Python）

    我正在尝试编写一个包含一些数学函数的小型 Python 模块 例如 它可能包含如下函数 def quad x a b c return a x 2 b x c 您可能会注意到它包含几个参数 即a b c 除了变量x 现在 如果我将其放入文件

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • 理解 z-index：该元素如何出现在其父级同级元素的前面？

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d

  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ

  • Bootstrap：如何将按钮组对齐在中心（垂直）

    在下面的代码中

  • 为什么 window 与 Internet Explorer 中的 window.self 不同？

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se

  • 在 Objective C 的类方法中引用类本身

    我希望我没有跳过 ObjC 手册中的这一部分 但是是否可以从类的一个类方法中引用该类 就像在 PHP 中一样 您将使用 this 来引用当前实例 而 self 引用实例的类 this 的 ObjC 等价物将是 self 那么 PHP 的 s

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 正则表达式正在抓取前面的字符

    所以我在正则表达式中遇到了一些不一致的行为 我的正则表达式 lt test 输入字符串 test exe c echo teststring gt test teststring 当我运行这个时https Regex101 com http

  • 自 UTC 时区当天开始以来的秒数

    如何在Python中找到 自UTC时区开始以来的秒数 我查看了文档 但不明白如何使用它datetime timedelta 这是一种方法 from datetime import datetime time utcnow datetime

  • 设置selectedindex不触发onchange事件

    我正在尝试更改选择标签的选定索引 但是通过 jquery 更改索引时不会触发 onchange 事件 我正在动态地为选择标签创建选项 我不会知道选项标签的值 还有其他方法可以实现吗 这是我的代码片段 请随意提供意见 function cal

  • 如何让 Pyflakes 忽略语句？

    我们的许多模块都是从以下开始的 try import json except ImportError from django utils import simplejson as json Python 2 4 fallback 这是整个文

  • 获取 Haskell CSV 中的列并推断列类型

    我正在交互式 ghci 会话中探索 csv 文件 在 jupyter 笔记本中 import Text CSV import Data List import Data Maybe dat lt parseCSVFromFile home

  • 如何从我的应用程序中打开 iPhone 日历？

    我希望能够在我的应用程序中实现一个按钮 用于退出我的应用程序 并将用户带到 iPhone 的日历 我对将用户发送到特定事件不感兴趣 只要打开日历就可以了 有什么建议么 嘿可能是一个迟到的答案 但你现在可以这样做 UIApplication

  • ExtJS 4 关联和 store.save()

    我正在使用 ExtJS 4 并且有一个定义了关联 hasMany 的模型 ModelA gt hasMany gt ModelB 我使用 GridA 显示来自 ModelA 的数据 单击 GridA 中的记录时 我使用 rowSelect

  • 使用jquery进行反应以滑动切换

    我正在尝试通过制作带有可折叠项目的菜单来学习一些 React 我使用 jQuery 来实现它的 SlideToggle 功能 但我无法让它正常工作 反应代码的相关部分是这样的 var CollapsableMenuItem React cr

  • 在react-native-web中使用flex布局复制/粘贴

    我有一个通过 React Native 和 React Native Web 在本机和 Web 上运行的应用程序 一个屏幕包含一个带有自定义项目符号的列表 如下图所示 尽管文本通常会长到多行 问题是 当您复制 粘贴 至少在网络上 时 项目符

  • jquery 承诺的延迟

    我找不到delay or wait函数为jQuery承诺 我在 SO 上找到了一项功能 使用 jQuery Deferred 避免嵌套 setTimeout 回调 https stackoverflow com q 17983331 104

  • 用户如何在客户端下载文件（Google Web Toolkit）

    我正在使用 GWT Google Web Toolkit 制作一个网站 我需要向用户显示一个表格 并让用户下载表格的内容 在客户端 用户按下 下载 按钮时如何下载文件 下载 按钮有一个onClick 听众 并且客户端类扩展Composite

  • 外部声明中的警告

    include

  • Scala 有没有通用的记忆方法？

    我想记住这一点 def fib n Int if n lt 1 1 else fib n 1 fib n 2 println fib 100 times out 所以我写了这个 令人惊讶的是 它编译并工作了 我很惊讶 因为fib在其声明中引

  • 使用 PHP shell_exec() 循环：使用 php for() 还是 bash for-do-done？

    假设我想执行命令mycommand使用 PHPshell exec 10倍 我应该做一个 bash 循环吗 shell exec for i in 1 10 do mycommand i done 或者更确切地说是一个 PHP 循环 for

  • 如何从主应用程序访问 Rails Engines 方法？

    我正在尝试使用 Spree Core 引擎中定义的 current order 方法 https github com spree spree blob master core lib spree core current order rb

  • Symfony2 Doctrine2 后坚持关联

    有没有办法在 symfony2 中接收关联字段的 Doctrine 生命周期事件 http docs doctrine project org projects doctrine orm en 2 0 x reference events

  • phpmyadmin 3.4.0 ERD 转 PDF

    我可以使用 Designer 工具在 phpmyadmin 3 4 0 中创建 ERD 但如何将其导出为 PDF 我可以看到 导入 导出 PDF 模式的坐标 按钮 但看不到它的作用 也看不到如何获取我的 ERD 的 PDF 提前致谢 你已经

  • 将 AutoIT 与 Selenium 结合使用

    感谢您回答我之前的问题 但随着一个问题的解决 显然又发现了另一个问题 与Flash游戏本身的交互现在是问题所在 我尝试研究如何在 Selenium 中做到这一点 但无法完成 我见过 FlashSelenium Sikuli 和 AutoIT

  • Go 中的 switch 和 select 有什么区别？

    有什么区别吗switch and select in Go 除了一个人接受争论而另一个人不接受这一事实之外 A select仅与通道一起使用 Example https gobyexample com select A switch与具体类

  • 用于获取前一个同级的 CSS 选择器[重复]

    这个问题在这里已经有答案了 有没有办法使用纯 CSS 3 来选择具有特定类的元素的前一个同级元素 i e html div div div div div div div div css box1 some styling box2 som

热门标签