html - 悬停时选择最里面的类

Question

当我在元素中进行递归时，我想选择最里面的类。
当您将鼠标悬停在 .comment 上时，只会显示此 div 的 .btn-reply。
元素在 PHP 端生成(不包括在内，因为不相关)。

所以基本上如何选择大多数内部类元素而不是在父元素中选择相同的类元素(.comment > .btn-reply 也检查 SO Snippet)。

.comment {
  border-top: 1px solid red;
  border-left: 1px solid red;
  padding-left: 10px;
}
.comment .comment-header {
  height: 22px;
}
.comment .comment-header > .btn-reply {
  display: none;
}
.comment:hover > .comment-header > .btn-reply {
  display: inline;
}
button {
  font-size: 12px;
}

<div class="comment">
  <div class="comment-header">
    <button class="btn-reply">Show only me</button>
  </div>
  <div class="comment">
    <div class="comment-header">
      <button class="btn-reply">Show only me</button>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
    </div>
  </div>
  <div class="comment">
    <div class="comment-header">
      <button class="btn-reply">Show only me</button>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show oly me</button>
        </div>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在 .comment-header 上使用 hover，因为其他 .comment-headers 没有嵌套在其中:

.comment > .comment-header:hover > .btn-reply {
  display: inline;
}

---

.btn-reply
{
    display:none;
}

.comment {
  border-top: 1px solid red;
  border-left: 1px solid red;
  padding-left: 10px;
}
.comment .comment-header {
  height: 22px;
}

.comment > .comment-header:hover > .btn-reply {
  display: inline;
}
button {
  font-size: 12px;
}

<div class="comment">
  <div class="comment-header">
    <button class="btn-reply">Show only me</button>
  </div>
  <div class="comment">
    <div class="comment-header">
      <button class="btn-reply">Show only me</button>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
    </div>
  </div>
  <div class="comment">
    <div class="comment-header">
      <button class="btn-reply">Show only me</button>
    </div>
    <div class="comment">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show oly me</button>
        </div>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
      </div>
      <div class="comment">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
      </div>
    </div>
  </div>
</div>