仅将样式应用于当前元素的嵌套类答案

【问题标题】：Apply style to only nested class of current element仅将样式应用于当前元素的嵌套类
【发布时间】：2021-09-01 20:33:58
【问题描述】：

我知道在**CSS** 中，我们可以将一组样式应用于元素中的嵌套类（在此页面上演示Apply CSS rules to a nested class inside a div）。

我现在正在尝试将样式应用于 div 中的嵌套类。问题是我无法将样式仅应用于当前悬停元素的嵌套类。

为了进一步解释，这里是一个 HTML sn-p：

<div class="link-wrap">
     <div class="link"> Github </div>
     <hr class="text-underline">
<div>
    
<div class="link-wrap">
     <div class="link"> Facebook </div>
     <hr class="text-underline">
<div>

如果我将鼠标悬停在 Github 链接上，我希望仅更改 Github 链接的 <hr> 的样式。

目前，当我更改<hr> 的样式时，两个<hr>s 的样式会同时更改。

我正在尝试寻找非 JS 解决方案。

【问题讨论】：

标签： html css class sass

【解决方案1】：

这样的事情是否接近你所追求的？

.link-wrap:hover > .text-underline {
  border-color: blue;
}

<div class="link-wrap">
  <div class="link"> Github </div>
  <hr class="text-underline">
</div>

<div class="link-wrap">
  <div class="link"> Facebook </div>
  <hr class="text-underline">
</div>

【讨论】：

【解决方案2】：

.link-wrap:hover > hr {
   your styles
}

这会将your styles 应用于作为悬停的.link-wrap 的直接后代的任何<hr>

【讨论】：