parent 相关问题

在定向树中,父节点是感兴趣节点之前的前一节点。然后,父母这个词可以用于无数的计算机科学抽象中。包含的图形或逻辑项的容器可以称为父项。 OOP中的继承类可以称为父类。

将子项悬停在父项内,也会影响其他父项内的其他子项(兄弟父项)

我对悬停兄弟姐妹其他孩子有疑问,这是我的代码: &... 我对悬停兄弟姐妹的其他孩子有疑问,这是我的代码: <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>

回答 1 投票 0

CSS 大小嵌套 DIV 基于父级父 DIV 大小

假设我有这个 HTML 在哪里 所有 DIV 都是

回答 1 投票 0

html css 中心,忽略其他元素

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-menu"> <a href="#" class="link"> <p class="nav-item">Home</p> </a> <a href="#" class="link"> <p class="nav-item">Services</p> </a> <a href="#" class="link"> <p class="nav-item">About us</p> </a> <a href="#" class="link"> <i class="fa-solid fa-house"></i> </a> <a href="" class="link"> <p class="sign-in">Login</p> </a> <a href="" class="link"> <p class="sign-up">Sign Up</p> </a> </div> 我想将元素<a href="#" class="link"><i class="fa-solid fa-house"></i></a>居中,忽略其他元素。也就是说,它以父元素的宽度为中心,不会干扰其他元素。我可以使用边距、填充来做到这一点,但我认为这是一种愚蠢的方法,特别是对于自适应 你的意思是这样吗?: a.link:has(> i.fa-solid) { text-align: center; display: block; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-menu"> <a href="#" class="link"> <p class="nav-item">Home</p> </a> <a href="#" class="link"> <p class="nav-item">Services</p> </a> <a href="#" class="link"> <p class="nav-item">About us</p> </a> <a href="#" class="link"> <i class="fa-solid fa-house"></i> </a> <a href="" class="link"> <p class="sign-in">Login</p> </a> <a href="" class="link"> <p class="sign-up">Sign Up</p> </a> </div> 这利用了相对较新的 :has() 伪类 来指定 <a> 元素,该元素具有与 i.fa-solid 选择器匹配的子元素。从那里,它可以简单地将显示更改为 block 并将文本居中。 如果您愿意,您还可以使用 display: inline-block 并将 width 设置为 100%。 请注意,<a> 的宽度随后会增长以匹配父容器的宽度。我假设这不是问题,因为其余 <a> 元素的宽度已经在您的代码中做到了这一点。

回答 1 投票 0

也为家长添加课程

我正在构建一个多级菜单,并且想通过函数(正在运行)向元素添加一个活动类,但也想将该类添加到其父元素中。 我正在构建一个多级菜单,并且想通过函数(正在运行)向元素添加一个活动类,但也想将此类添加到其父元素中。 <ul class="main-menu"> <li><a href="#" class="nav-link">Maine Level 1</a> <ul> <li><a class="nav-link" scene="scene_1">Scene 1</a></li> <li><a class="nav-link" scene="scene_2">Scene 2</a></li> </ul> </li> <li><a href="#" class="nav-link">Maine Level 2</a> <ul> <li><a class="nav-link" scene="scene_3">Scene 3</a></li> <ul> <li><a class="nav-link" scene="scene_3.1">Scene 3.1</a></li> <li><a class="nav-link" scene="scene_3.2">Scene 3.2</a></li> </ul> <li><a class="nav-link" scene="scene_4">Scene 4</a></li> </ul> </li> </ul> 功能: function set_active_scene(name){ $("ul.main-menu ul li a").each(function() { $(this.closest('li')).removeClass("active"); if ($(this).attr("scene") == name) $(this.closest('li')).addClass("active"); }); } 我尝试使用 $(this.parents('li')).addClass("active");但它不工作... 任何想法 ? 非常感谢! 如果您只想将“active”类添加到活动锚元素的直接父 li 元素,则可以简单地使用parent()。这是修改后的函数: function set_active_scene(name) { $("ul.main-menu ul li a").each(function() { $(this).closest('li').removeClass("active"); // Remove active class from all list items if ($(this).attr("scene") == name) { $(this).closest('li').addClass("active"); // Add active class to the current list item $(this).parent('li').addClass("active"); // Add active class to the immediate parent list item } }); } 通过此修改,只有活动 a 元素的 li 元素的直接父级才会接收“active”类,而不是 DOM 树上的所有父级 li 元素。

回答 1 投票 0

将最新文件过滤到变量 $latestfile 中后,我需要 $latestfile 的父文件夹

首先我正在过滤最新的文件: #用变量复制,获取最新文件,降序优先,时间戳 $latestfile = gci -属性!目录 *.xml -Recurse -Force |排序对象...

回答 1 投票 0

可选择引用父结构

我正在尝试在 Rust 中实现一个可以包含值的“范围”。它可以选择具有一个父作用域,如果父作用域包含该值但它不包含该值,则它可以查找该父作用域。 该...

回答 1 投票 0

调试父类构造函数

我正在尝试通过调用子类来调试 R6 父类的构造函数。 这是代码 图书馆(R6) 家长 <- R6Class( "parent", public=list( y=data.table(), ...

回答 1 投票 0

获取 JMenuItem 的窗口?

有没有办法获取JMenuItem所属的Window?我尝试了这个概念验证: JFrame testFrame = new JFrame(); testFrame.setSize(300, 100); testFrame.setLocationRelativeTo(null);

回答 1 投票 0

Bootstrap treeview如何自动展开父节点?

我正在使用引导树视图,它大部分工作得很好,但是当我从菜单链接加载新页面时,我希望所选子节点的所有父节点展开,有谁知道如何...

回答 1 投票 0

PHP - 查找数组的父键

我正在尝试找到一种方法来返回数组父键的值。 例如,从下面的数组中我想找出父级的键,其中 $array['id'] == "0002"。 父键很明显

回答 4 投票 0

parent::method() - 调用非静态方法

我不明白PHP中调用父方法的概念。 父方法不是静态的,但它是静态调用的 - 通常 PHP 会抛出错误/警告。 问题是,这是一个q...

回答 3 投票 0

关闭弹出窗口后刷新父窗口

我正在创建一个转到 hello.html 的弹出窗口。我希望当我关闭弹出窗口(hello.html)时重新加载我的原始(父页面)。我似乎无法让它发挥作用,但我已经很接近了。我在这里...

回答 7 投票 0

父-子关系-递归CTE-如何检索结构

我有一份报告,其中有两栏告知员工及其经理(下表)。 员工 经理 A 乙 乙 C C F F 右 右 我 G 乙 H 乙 我 我 我最终想要的是一个管理团队...

回答 1 投票 0

Python中有没有办法访问父模块

我需要知道是否有办法从子模块访问父模块。如果我导入子模块: 从子流程导入类型 我有类型 - 是否有一些 Python 魔法可以访问子进程

回答 5 投票 0

Powershell 通过匹配文件名及其父文件夹名称来查找文件并将其添加到 zip 中

需要 powershell 脚本来执行以下操作: 提供了以逗号分隔的文件名及其父文件夹,如下所示: $itemsToInclude = "阶段 rsw.war,dev\deployfile" 我希望递归搜索...

回答 1 投票 0

VueJs 树递归元素发送到父级

如何在递归子组件 vuejs 中发出事件 以 vue 站点 https://v2.vuejs.org/v2/examples/tree-view.html 中的树为例 您如何将点击传输给家长每个

回答 4 投票 0

嵌套路由SAPUI5

我有一个关于 SAPUI5 中路由的问题。我有一个带有两个主视图的 SplitApp 容器。第一个主视图显示设备列表。第二个主视图显示

回答 1 投票 0

当我创建新的 div 时,java 脚本给出错误

我有这个html代码 债务类型: 我有这个html代码 <div class="form-group"> <label>Debt Type:</label> <select id="debtType" placeholder="Chose Type of Debt" required> <option value="" disabled selected hidden>Chose Type of Debt</option> <option value="Auto Loan"> Auto Loan</option> <option value="Student Loan"> Student Loan</option> <option value="Debt Card Loan"> Debt Card Loan</option> <option value="House Loan"> House Loan</option> <option value="others">others</option> </select> <p class="error"></p> </div> <div class="form-group"> <label>Principal Amount:</label> <input type="number" id="principal" placeholder="Enter principal amount"> <p class="error"></p> </div> <div class="form-group"> <label>Annual Interest Rate :</label> <input type="number" id="rate" placeholder="Enter annual interest rate"> <p class="error"></p> </div> <div class="form-group"> <label>Monthly Payment:</label> <input type="number" id="payment" placeholder="Enter monthly payment"> <p class="error"></p> </div> 我用这种和平的代码检查字段不应该为空 class FormValidator { constructor(fields) { this.fields = fields; this.isValid = true; } initialize() { this.validateOnEntry(); } validateOnEntry() { let self = this; this.fields.forEach(field => { const input = document.querySelector(`#${field}`); input.addEventListener('input', () => { self.validateFields(input); }); }); } validateFields(field) { console.log(field.parentElement); const errorElement = field.parentElement.querySelector('.error'); if (field.value.trim() === "") { this.setStatus(errorElement, "Please select item", "error"); this.isValid = false; } else { this.setStatus(errorElement, null, "success"); } if (field.id === "principal" && isNaN(parseFloat(field.value))) { this.setStatus(errorElement, "Please enter principle", "error"); } if (field.id === "rate" && isNaN(parseFloat(field.value))) { this.setStatus(errorElement, "Please enter the rate", "error"); } if (field.id === "payment" && isNaN(parseFloat(field.value))) { this.setStatus(errorElement, "Please enter payment", "error"); } } setStatus(errorElement, message, status) { if (status === "success") { errorElement.innerText = ""; } if (status === "error") { errorElement.innerText = message; } } } const fields = ["debtType", "principal", "rate", "payment"]; const validator = new FormValidator(fields); validator.initialize(); document.getElementById("calculateButton").addEventListener("click", function () { // Reset isValid before revalidation validator.isValid = true; fields.forEach(field => { const input = document.querySelector(`#${field}`); validator.validateFields(input); }); if (validator.isValid) { addDebt(); // Call addDebt only if all fields are valid } }); 效果很好,但是 当我像这样在输入标签上添加新的 div 时 <div class="form-group"> <label>Monthly Payment:</label> <div> <input type="number" id="payment" placeholder="Enter monthly payment"> </div> <p class="error"></p> </div> 它给出了错误,所以请告诉我如何解决它以及除了 field.parentElemet 之外我应该使用什么。这个 div 我把这个 div 放在输入字段中 您收到的错误是因为错误元素不再位于同一父元素中。 尝试使用: const errorElement = field.closest('.form-group').querySelector('.error'); 这会在 DOM 中搜索最近的祖先 .form-group,然后查询 .error 元素。

回答 0 投票 0

Xamarin 表单不一致“页面不得已有父级”崩溃

当在应用程序中快速单击导航按钮时,应用程序通常会崩溃,因为 Xamarin 会对添加哪个页面感到困惑,并尝试推送或弹出到不存在的页面。这个bug哈...

回答 1 投票 0

为什么我的子组件在添加和删除注释后没有重新渲染

我有 singlePost 组件,现在加载了帖子,我创建了另一个组件 Comments,当我从 Comment 部分添加或删除评论时,它不会重新渲染以向我显示该结果

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.