siblings 相关问题

如何用CSS显示和隐藏div？

在我的脚本中有三个 div。我想当我将鼠标悬停在第一行时显示带有 class="ab" 的 div ，当悬停在第二行时显示带有 class="abc" 的 div 。否则我想显示 div...

有没有办法获取一个元素的第n个兄弟（元素）？ （不是父元素的第 n 个子元素）

我有一个行数未知、列数可变的网格。我通过声明一个常量来设置列数。*我检测到一个组合键将焦点从网格中的元素移动......

当下一个兄弟姐妹具有特定类别时选择前一个兄弟姐妹

我正在使用 Bootstrap 的内容管理系统，并且有很多默认样式。全出血英雄图像页面标题有一个默认的 margin-bottom: 20px 和 border-bottom: 1px soli...

为什么这个CSS同级选择器没有选择所有同级？

li:has(>标签) { 背景：#0c0； } li~li:有(>标签) { 边框：4px实线#c0c； } li:has(>label) { background: #0c0; } li~li:has(>label) { border: 4px solid #c0c; } <ul tabindex="-1"> <li><input type="radio"/ name="r6a" id="r61a" value="6.0a" /><label for="r60a">[Item 6.0]</label></li> <li tabindex="0">[Item 6.1]</li> <li><input type="radio"/ name="r6a" id="r62a" value="6.2a" /><label for="r62a">[Item 6.2]</label></li> <li><input type="radio"/ name="r6a" id="r63a" value="6.3a" /><label for="r63a">[Item 6.3]</label></li> <li tabindex="0">[Item 6.4]</li> </ul> 当我读到这篇文章时，第一个选择器选择具有 label 作为直接下行的 li，第二个选择器选择与具有 label 的 li 的兄弟姐妹的所有 li。但为什么最后一个选择器只选择了项目 6.2 和 6.3 呢？它应该选择所有这些（包括所有都是具有 label 的 li 的兄弟），或者应该选择 6.1 和 6.4（如果它是排他的）。 据此： https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator 他们不必彼此相邻，只需共享同一个父母即可。他们就是这么做的。 要求： 选择与标签为 li 具有相同父级的所有 li 直系后裔 因此，如果 ul 中的任何一个 li 具有直接后代标签，则您希望选择 ul 中的所有 li。 您可以在 ul（即父级）上使用 :has 来实现以下目的： ul:has(>li>label) > li { border: 4px solid #c0c; } <ul tabindex="-1"> <li><input type="radio"/ name="r6a" id="r61a" value="6.0a" /><label for="r60a">[Item 6.0]</label></li> <li tabindex="0">[Item 6.1]</li> <li><input type="radio"/ name="r6a" id="r62a" value="6.2a" /><label for="r62a">[Item 6.2]</label></li> <li><input type="radio"/ name="r6a" id="r63a" value="6.3a" /><label for="r63a">[Item 6.3]</label></li> <li tabindex="0">[Item 6.4]</li> </ul>

如何从其兄弟节点获取img的src和数据

loadHtmlFile(http://www.amazon.com); $xpath = new DOMXPath( $htmlget); $nodelist = $xpath->query( "//img/@src" ); foreach ($点头...

XPath 选择父母兄弟姐妹的后代

此 html 位于我的页面内： 按车辆类型细化 ...

HTML XPATH，获取姨妈/叔叔html

在此输入图像描述 我能够访问包含 CSCI 12 的标签 "//span[包含(., '" + CSCI + "') 和包含(., '" + 12 + "')]" 但我卡住了

如何使用 Go 和 etree XML 包访问同级元素？

给定一个如下所示的 XML 文档： 今天 1 给定一个如下所示的 XML 文档： <MasterXML> <Processes> <Params> <ParamName>today</ParamName> <ParamType>1</ParamType> <ParamValue/> </Params> <Params> <ParamName>today</ParamName> <ParamType>2</ParamType> <ParamValue/> </Params> <Params> <ParamName>today</ParamName> <ParamType>3</ParamType> <ParamValue/> </Params> </Processes> </MasterXML> 使用 beevik/etree for Go 包，当 <ParamValue/> 具有特定的特定值时，如何访问文档中 <Params> 的每个实例的 <ParamName>，以用值填充它。 在给定的示例中，当 <ParamValue/> 持有值 today 时，我希望用 05/02/2024 填充所有 <Params> 节点中的所有 <ParamName> 节点。 此代码仅适用于包含许多实例的文档中 <Params> 节点的第一个实例，其中 <ParamName>== today ，尽管循环似乎应该访问 <Params> 的每个实例： for _, elem1 := range doc.FindElements(".//Processes//Params//ParamName") { if elem1 == nil { log.Fatal("Check XPath) } s := elem1.Text() if s == "today" { elem2 := elem1.FindElement("//ParamValue") elem2.SetText("05/02/2024") } } 我该怎么做？为什么 range doc.FindElements(".//Processes//Params//ParamName") 找不到 <Params> 的每个实例？我应该使用不同的方法吗？ 您当前的代码确实按照您所描述的方式运行，因为通过在 XPath 中使用双斜杠，您始终以递归方式搜索 XML 树，这意味着您始终从顶部找到第一个出现的位置。 这是固定样本： package main import ( "log" "os" "strings" "github.com/beevik/etree" ) func main() { doc := etree.NewDocument() if err := doc.ReadFromFile("master.xml"); err != nil { panic(err) } for _, elem1 := range doc.FindElements(".//Processes//Params//ParamName") { if elem1 == nil { log.Fatal("Check XPath") } s := elem1.Text() //println(s) if strings.TrimSpace(s) == "today" { elem2 := elem1.FindElement("../ParamValue") elem2.SetText("05/02/2024") } } doc.WriteTo(os.Stdout) } 这需要 master.xml 与您的 .go 文件位于同一目录中。我选择了这个： <MasterXML> <Processes> <Params> <ParamName> today </ParamName> <ParamType>1</ParamType> <ParamValue/> </Params> <Params> <ParamName> tomorrow </ParamName> <ParamType>2</ParamType> <ParamValue/> </Params> <Params> <ParamName> today </ParamName> <ParamType>3</ParamType> <ParamValue/> </Params> </Processes> </MasterXML> 产生所需的输出： <MasterXML> <Processes> <Params> <ParamName> today </ParamName> <ParamType>1</ParamType> <ParamValue>05/02/2024</ParamValue> </Params> <Params> <ParamName> tomorrow </ParamName> <ParamType>2</ParamType> <ParamValue/> </Params> <Params> <ParamName> today </ParamName> <ParamType>3</ParamType> <ParamValue>05/02/2024</ParamValue> </Params> </Processes> </MasterXML>

将子项悬停在父项内，也会影响其他父项内的其他子项（兄弟父项）

我对悬停兄弟姐妹其他孩子有疑问，这是我的代码： &... 我对悬停兄弟姐妹的其他孩子有疑问，这是我的代码： <div class="parent"> <div class="child"> </div> <div class="parent"> <div class="child"> </div> <div class="parent"> <div class="child"> </div> 我尝试了这种风格的代码，正在工作，但我发现了一些问题 .parent:has(.child:hover) ~ .parent .child { background-color: red; } 问题是，当第一个孩子悬停时，所有其他孩子（第二个和第三个）也悬停，但是当我悬停第二个孩子时，只有第三个孩子悬停，第一个孩子不受影响......可以请您帮我解决问题，谢谢。 :has选择器现在适用于大多数浏览器（CanIUse）。 .parent { border: 3px solid black; margin: 10px; padding: 10px; } .child { padding: 10px; border: 3px solid blue; } .child:hover, .parent:has(.child:hover)~.parent .child { background-color: orange; } <div class="parent"> <div class="child">child 1</div> </div> <div class="parent"> <div class="child">child 1</div> </div> <div class="parent"> <div class="child">child 1</div> </div>

根据常见的 CSS 类选择特定的 HTML 同级

我有以下纯 CSS 表单，应根据无线电输入的值显示表单 A 或表单 B： A 我有以下纯 CSS 表单，应根据单选输入的值显示表单 A 或表单 B : <div> <label for="a">A</label> <input class="trigger" type="radio" id="a" name="formSelector" value="a" /> <div id="a" class="hidden-content"> <!-- Form A --> A </div> <label for="b">B</label> <input class="trigger" type="radio" id="b" name="formSelector" value="b" /> <div id="b" class="hidden-content"> <!-- Form B --> B </div> </div> 这是相应的CSS代码： div { display: flex; flex-direction: row; } .hidden-content { display: none; } .trigger:checked + .hidden-content { display: block; // Anything other than none } 当然，只有当每个trigger是要显示的hidden-content的相邻兄弟时，这才有效。 我想知道是否可以使其工作，仅使用CSS，即使trigger和hidden-content不相邻。 我想象像下面的CSS这样的东西可能存在，$是兄弟姐妹的公共类，但没有指定它（一种模式匹配）。 .hidden-content { display: none; } $.trigger:checked ~ $.hidden-content { display: flex; } 我更喜欢这样做，因为我有一个弹性布局，应该在第一行中显示单选和标签，并在后续行中显示所显示表单（A 或 B）的内容。 我可能会以错误的方式解决这个问题，请随意提出任何替代方案，顺便说一句，也欢迎解决此问题的任何解决方案:) 我尝试将 trigger 和 hidden-content 作为相邻的兄弟姐妹，如果使用相应的 CSS 属性手动正确设置 order，则可以工作，但我担心这将很难维护。 我尝试了基于特定 ID 的逻辑，这会导致大量重复（参见下面的代码） #hidden-content-a, #hidden-content-b { display: none; } #trigger-a:checked ~ #hidden-content-a { display: block; // Anything other than none } #trigger-b:checked ~ #hidden-content-b { display: block; // Anything other than none } 您可以使用:has()选择器： .hidden-content{ display: none; } :root:has(.trigger:checked) .hidden-content { display: block; } <div> <div> <div> <label><input type='checkbox' class='trigger'>show content</label> </div> </div> </div> <div> <div> <div class="hidden-content">Secret...</div> </div> </div>

为什么 CSS 嵌套同级组合器在以下示例中无法正确应用？

黄色 绿色 <... <div class='splash yellow'> <span>Yellow</span> </div> <div class='splash green'> <span>Green</span> </div> <div class='splash red'> <span>Red</span> </div> .splash { margin: 15px; + .red { background-color: red; } + .green { background-color: green; } + .yellow { background-color: yellow; } } https://jsfiddle.net/8e27qyc9/2/ 为什么黄色背景没有像小提琴示例中的红色和绿色那样应用？是什么导致了这种行为？ 我混淆了同级选择器和复合选择器。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#concatenation_is_not_possible 解决方案： .splash { margin: 15px; .red& { background-color: red; } .green& { background-color: green; } .yellow& { background-color: yellow; } }

在 React 中兄弟姐妹之间进行交流

我正在尝试创建可重用的时间栏，它接受日期作为道具并返回两个日期，左和右（例如上限或下限日期......其中可能有更多逻辑）。 我正在努力...

如何调用另一个同级组件的方法 - Angular 1.5

我在一个页面中有两个同级组件，需要调用第二个组件函数并传递第一个组件链接的 onClick 事件的一些值。 我在一个页面中有两个兄弟组件需要调用第二个组件函数并传递第一个组件链接的一些值onClick事件。 <my-container> <sibling-component1></sibling-component1> // this has link to call function <sibling-component2></sibling-component2> // this has function </my-container> 代码链接：https://codepen.io/sandeep821/pen/aWQXZx?editors=1111 寻找解决方案（Angular 中协作指令之间的通信）：http://blog.carbon Five.com/2015/03/25/communication- Between-collaborating-directives-in-angular/

JavaScript .siblings 方法在 Wordpress 中带有下拉子链接的移动菜单中不起作用

在 bemchemia.pl 网站上，我有一个带有下拉子链接的 Wordpress 移动菜单。我想仅通过单击箭头而不是单击父链接来使用 JavaScript .slideToggle 显示子链接....

如何根据兄弟编号选择xpath

我有一个表，我想根据名称选择详细信息字段。 例如，我想根据表中的第一个 John（即第 29 行）选择一个详细信息字段。 用户名 coll: usercard-ta...

Python 从导入同级模块的子文件夹导入模块

文件夹结构： ABC |--数据库 | |-- __init__.py | |-- post.py | |-- common.py | |-- 连接.py |-- __init__.py |-- main.py 我想从 main.py 导入 db 文件夹中的 post.py 。 内页...

如何链接到同级 CMakeLists.txt 中 find_package() 找到的目标？

我有这样的层次结构： CMakeLists.txt # 按列出的顺序调用 add_subdirectory() 获取子目录 +-深度 | +-CMakeLists.txt # 调用 find_package(Vulkan)，一个第 3 方库，存在于...

为什么html同级元素不会变得相同高度？

**这是我在这个网站上的第一个问题，在网络开发方面我几乎是一个新手，所以如果这是一个令人难以置信的愚蠢问题，我提前表示抱歉，但我永远不能。 ..

Angular 中兄弟组件之间的数据传输

我有两个兄弟组件和一个父组件。我想将子二中的数组数据传输到子一中。 父组件.html 我有两个兄弟组件和一个父组件。我想将子二中的数组数据传输到子一中。 parent.component.html <child-one (employees)="employeesFromChild"></child-one> <child-two (outputFromChild)="getEmployees($event)"></child-two> parent.component.ts employeesFromChild!: Employee[]; getEmployees(event: Employee[]){ this.employeesFromChild = event; } child-one.component.ts @Input() employees!: Employee[]; ngOnInit(){ console.log(this.employees) } child-two.component.ts selectedData: Employee[] = [ {firstName: 'Max', lastName: 'Arnold', age: '25'}, {firstName: 'Betty', lastName: 'Arnold', age: '22'}, {firstName: 'Mark', lastName: 'Arnold', age: '20'}, ]; @Output() outputFromChild: EventEmitter<Employee[]> = new EventEmitter<Employee[]>(); ngOnInit(){ this.outputFromChild.emit(this.selectedData); } 当我 console.log(this.employees) 时，我在子一中得到未定义的结果。我该如何解决它？ 在 child-one 员工变量中使用方括号而不是圆括号。 方括号用于Input类型事件，圆括号用于output类型事件。 <child-one [employees]="employeesFromChild"></child-one> <child-two (outputFromChild)="getEmployees($event)"></child-two> 并将 child-one.component.ts 生命周期挂钩更改为 ngOnChanges 而不是 ngOnInit

Angular：在两个同级组件之间链接函数和一些数据

嘿，所以我有两个不同的组件，一个是搜索栏组件，一个是主页组件，它们都是我的应用程序组件的子组件。 所以我想在海底获取一些信息...