siblings 相关问题

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

我对悬停兄弟姐妹其他孩子有疑问，这是我的代码： &... 我对悬停兄弟姐妹的其他孩子有疑问，这是我的代码： <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：在两个同级组件之间链接函数和一些数据

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

如何交换两个兄弟姐妹的位置：使用xmlstarlet

如何交换两个兄弟姐妹的位置： 从： 约翰 佩特森 如何交换两个兄弟姐妹的位置： 来自： <article> <name> <firstname>John</firstname> <surname>Pettterson</surname> </name> </article> 至： <article> <name> <surname>Pettterson</surname> <firstname>John</firstname> </name> </article> 提前致谢。 大富士 这就是我所做的： xmlstarlet ed -L -i "//article/name/givenname" -t elem -n "surname1" -v "$(xmlstarlet sel -t -v "//article/name/surname" swapelment.xml)" swapelment.xml xmlstarlet ed -L -d "//article/name/surname" swapelment.xml xmlstarlet ed -L --rename "//article/name/surname1" -v "surname" swapelment.xml 创建一个新的兄弟元素<surname1>作为第一个兄弟元素，并将元素<surname>的值复制到它。 删除元素<surname>. 将创建的元素 <surname1> 重命名为 <surname>.

XSL - 如何选择所有祖先到根，而不是兄弟节点

我有一个 xml 负载 乙 10 Item10 我有一个 xml 有效载荷 <Root> <Header> <Name>B</Name> </Header> <Item> <Id>10</Id> <Description>Item10</Description> </Item> <Item> <Id>20</Id> <Description>Item20</Description> </Item> <Package> <Id>A</Id> </Package> <Package> <Id>B</Id> </Package> <Package> <Id>C</Id> </Package> </Root> 对于每个包，我试图将当前包的所有祖先的整个消息输出到它的根，而不是它的后续兄弟节点（其他包）。 期望的输出： ` <Root> <Header> <Name>B</Name> </Header> <Item> <Id>10</Id> <Description>Item10</Description> </Item> <Item> <Id>20</Id> <Description>Item20</Description> </Item> <Package> <Id>A</Id> </Package> </Root> <Root> <Header> <Name>B</Name> </Header> <Item> <Id>10</Id> <Description>Item10</Description> </Item> <Item> <Id>20</Id> <Description>Item20</Description> </Item> <Package> <Id>B</Id> </Package> </Root> <Root> <Header> <Name>B</Name> </Header> <Item> <Id>10</Id> <Description>Item10</Description> </Item> <Item> <Id>20</Id> <Description>Item20</Description> </Item> <Package> <Id>C</Id> </Package> </Root> ` 但我收到 3 条消息，包括每条消息中的所有包裹。 这是我的代码 <?xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"> <xsl:template match="/"> <Messages> <xsl:for-each select="//Package"> <xsl:copy-of select="/*[not(following-sibling::*)]" /> </xsl:for-each> </Messages> </xsl:template> 我做错了什么？谢谢你的建议。 要得到你展示的结果（不是你描述的结果），你可以简单地做： XSLT 1.0 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:strip-space elements="*"/> <xsl:template match="/Root"> <xsl:variable name="common" select="*[not(self::Package)]" /> <xsl:for-each select="Package"> <Root> <xsl:copy-of select="$common"/> <xsl:copy-of select="."/> </Root> </xsl:for-each> </xsl:template> </xsl:stylesheet> 但请注意，此结果是一个 XML 片段，而不是一个格式良好的 XML 文档，因为它缺少单个根元素。

如果其中一个元素在单击时获得相同的类，则向所有同级元素添加一个类？

const images = document.querySelectorAll(".img_items"); images.forEach((图片) => { image.addEventListener("点击", () => { image.classList.add("选择"); }); }); .img_items::之后{

无法在 for each 循环中获取前一项

我在滚动事件中有以下代码： stickySliderItems.forEach( function( item, i ) { if(i) { // 先排除 让我开始滚动 = 滚动 -

jQuery：如何将子元素移动到它的“叔叔”元素中？即其父母的兄弟姐妹？

我想将一个 div 移动到它的叔叔 div 或它的父级的兄弟姐妹中，并且只向下移动一步。 所以我想将“.child4”类移动到“.uncle”中。 我想将一个 div 移动到它的叔叔 div，或者它的父级的兄弟姐妹中，并且只向下移动一步。 所以我想将类“.child4”移到“.uncle”中。 <div class="parent" > <div class="child1" >apples</div> <div class="child2" >oranges</div> <div class="child3" >pears</div> <div class="child4" >banana</div> <div class="child5" >pineapple</div> <div class="child6" >kiwi</div> <div class="child7" >passionfruit</div> </div> <div class="uncle" > </div> <div class="parent" > <div class="child1" >apples2</div> <div class="child2" >oranges2</div> <div class="child3" >pears2</div> <div class="child4" >banana2</div> <div class="child5" >pineappl2e</div> <div class="child6" >kiwi2</div> <div class="child7" >passionfruit2</div> </div> <div class="uncle" > </div> 但是我希望它是相对的，有多个父/子 div。 如果我只做一个简单的 appendTo 然后全部放在一个 div 而不是 relative. 我已经走到一半了，我设法找到了让孩子向上移动一级的代码。现在我只需要它在 div 里面移动一个兄弟姐妹。 jQuery(function(){ //Make sure it is inside DOM ready var $div = jQuery('div:has(".child4")'); $div.after(function () { return jQuery(this).children(".child4"); }); }); 最后是这样的： <div class="parent" > <div class="child1" >apples</div> <div class="child2" >oranges</div> <div class="child3" >pears</div> <div class="child5" >pineapple</div> <div class="child6" >kiwi</div> <div class="child7" >passionfruit</div> </div> <div class="child4" >banana</div> <div class="uncle" > </div> <div class="parent" > <div class="child1" >apples2</div> <div class="child2" >oranges2</div> <div class="child3" >pears2</div> <div class="child5" >pineappl2e</div> <div class="child6" >kiwi2</div> <div class="child7" >passionfruit2</div> </div> <div class="child4" >banana2</div> <div class="uncle" > </div> 但我想要的是： <div class="parent" > <div class="child1" >apples</div> <div class="child2" >oranges</div> <div class="child3" >pears</div> <div class="child5" >pineapple</div> <div class="child6" >kiwi</div> <div class="child7" >passionfruit</div> </div> <div class="uncle" > <div class="child4" >banana</div> </div> <div class="parent" > <div class="child1" >apples2</div> <div class="child2" >oranges2</div> <div class="child3" >pears2</div> <div class="child5" >pineappl2e</div> <div class="child6" >kiwi2</div> <div class="child7" >passionfruit2</div> </div> <div class="uncle" > <div class="child4" >banana2</div> </div> 帮助赞赏 本 只需使用.detach()和.appendTo. $(".child4").detach().appendTo(".uncle"); 例子： $(".child4").detach().appendTo(".uncle"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child1">apples</div> <div class="child2">oranges</div> <div class="child3">pears</div> <div class="child4">banana</div> <div class="child5">pineapple</div> <div class="child6">kiwi</div> <div class="child7">passionfruit</div> </div> <div class="uncle"> </div>

需要帮助理解嵌套元素的 z-index

我需要帮助理解元素的 z-index 是如何受嵌套或不嵌套元素影响的。我已经设法让我的代码工作（它应该有一个可点击的图像（图像......

尝试将属性应用于 div [重复]中的所有兄弟元素

当用户将鼠标悬停在 div 中的一个项目上时，尝试更改 div 中一个项目（包裹图像的锚标记）的所有其他兄弟姐妹的不透明度。 它部分有效但是当我将鼠标悬停在一个项目上时......

如何从嵌套结构中获取子元素 liferay7 Freemarker

我在 Liferay 7 中有这样的结构。(一个字段可重复2个子字段) '姓名' -可重复 -'电话' -'电子邮件' 你能给我看看这个结构的模板例子吗？