程序员经验分享-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 选择器[重复] 的相关文章

  • PHP DOM 获取选定的

    假设 HTML 看起来像这样

  • 在 jQuery 中删除或更改 CSS 伪类

    一个足够简单的问题 如此简单 是否可以使用 jQuery 删除或更改 CSS 伪类 或者任何其他与此相关的 Javascript 方法 具体来说 我想摆脱 专注于输入 我无法以任何方式直接更改 CSS 文件 谢谢你的帮助 Buster 我无

  • 更改 RMarkdown 中的块背景颜色

    我希望某个代码块以不同的颜色 例如红色 突出显示 以表明这是不好的做法 如果我使用的是 Rnw 我可以添加块选项background red 并得到我想要的 但这似乎不起作用 Rmd 我的猜测是 我需要制作一个自定义 css 样式表 尽管我

  • 使用 javascript/jQuery 更改类的背景颜色属性

    这似乎是一个简单的问题 但没有任何解决办法 我正在尝试使用 javascript jQuery 动态更改某些文本的背景颜色 从白色或粉色到绿色 但由于某种原因它不起作用 文本使用名为 novice 的 CSS 类进行样式设置 这是CSS 这

  • IE 中重叠元素的垂直对齐

    我正在构建的表单可以在 Chrome 和 FF 中完美呈现 但在 IE 中完全未对齐 它应该是什么样子 Image HTML div class portlet content div class logoInfo h3 strong La

  • Python：如何将包含对象的列表保存在文件中？

    我尝试创建不同的对象 使用类和对象 并将它们保存在文件中以便稍后编辑或检索它们 然而这就是它的样子 GlobalCategories GlobalContent def LoadData x y import pickle with ope

  • 从 Puppeteer 中的 page.evaluate 获取元素？ [复制]

    这个问题在这里已经有答案了 我正在与Node js and 傀儡师第一次 找不到输出值的方法page evaluate到外部范围 我的算法 Login Open URL Get ul 循环每个li然后点击它 等待innetHTML要设置并添

  • 如何将“重要”添加到 zIndex

    我网站上的某些附加组件之间存在冲突 使用 Firebug 我注意到如果我将 important 添加到 z 索引 我可以避免冲突 但 z index 值是使用 JavaScript 设置的 而不是 CSS 那么如何在以下 JS 代码中添加

  • 如何在 Firefox 和 IE 中获得自定义滚动条？

    我正在使用自定义滚动 它在 chrome 中工作正常 但在 Firefox 或 IE9 中不起作用 这是CSS webkit scrollbar width 7px height 1px webkit scrollbar thumb hei

  • 如何处理触摸设备上的悬停效果

    我有以下代码 div img src http placehold it 350x150 div class link cont a href click here to see more info a div div div width

  • 如何在 Ruby on Rails 中向 select_tag 添加类

    难以为此添加类标签 div class field div 这是我尝试过的 除其他外 div class field div

  • 使用 CSS 创建钟形

    我正在玩CSS中的形状 想要制作一个传统的钟形 想想圣诞钟声 这是我想要的一般形状 尽管我真的不关心顶部和底部的球 这是我到目前为止所拥有的 http jsfiddle net bhlaird NeBtU http jsfiddle net

  • CSS 3假3D立方体在2个盒子之间旋转

    我使用 css 实现了翻转旋转 flip card position relative z index 1 webkit perspective 1000px moz perspective 1000px o perspective 100

  • CSS 圆角

    我见过很多这方面的代码 但似乎没有一个能很好地工作或根本无法工作 我已经将图片用于圆角 但我需要代码 以便它能够围绕圆角 table 我找到的解决这个问题的唯一解决方案是在边框周围的单元格中添加图像 我还能尝试什么吗 Try selecto

  • 网格属性不适用于网格容器内的元素

    我正在尝试定位嵌套li ul li ul li 在最顶层创建的 CSS 网格上ul 还没有爱 它不起作用 也许这是不可能的 或者我错过了什么 orgChart ul orgChartLevel1 display grid grid temp

  • 相当于Outlook中的浮动

    我在尝试着float left一些表 但是刚刚遇到一个大问题 outlook不支持float 好吧 然后我尝试使用表格对齐等 但没有运气 桌子只是显示在彼此下方 而不是彼此并排 对此我们能做些什么吗 PS 它在其他设备上工作得很好 它只是

  • CSS 定位在 div 内

    我使用的 div 内部有 2 个元素 我想将第一个元素垂直对齐到 div 的顶部 将第二个元素垂直对齐 div 是页面的右侧部分 等于主要内容的高度 right float right width 19 background FF3300

  • 使浮动div高度相同

    我有 2 个并排的 div 我预先不知道它们的高度 它根据内容而变化 有没有一种方法可以确保它们始终具有相同的高度 即使其中一个拉伸 仅使用 CSS 我做了一个小提琴来展示 我希望红色和蓝色的 div 高度相同 http jsfiddle

  • 不透明div内的透明文本

    我有一个背景图像 上面有一个白色的 div 我希望该 div 内的文本是透明的 以便您可以 透过 背景图像 这有可能吗 应该看起来像这样 您需要将其用于您的文本CSS webkit text fill color transparent

  • 如何在 JavaScript 中将样式属性重置为其 CSS 默认值？

    在 php 生成的页面上有几个这样的元素 td class defaultTDStyle style color userDefinedCustomColor td 因此有一个默认样式 我应用了几个额外的样式来覆盖 CSS 中定义的样式 有

随机推荐

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

    所以我在正则表达式中遇到了一些不一致的行为 我的正则表达式 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

热门标签