Select 最里面 class 悬停

Question

当我在元素中进行递归时，我想 select 最里面 class。
当您将鼠标悬停在 .comment 上时，只会显示此 div 的 .btn-reply。
元素在 PHP 侧生成（不包括因为不相关）。

所以基本上如何 select 最内部的 class 元素而不是 select 父元素中相同的 class 元素（.comment > .btn-reply 也检查 SO 片段） .

.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

在您的评论中添加 :last-child 如何 header

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

Answer 2

在 .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>

Answer 3

由于不可能 select 元素的第一个父元素，我所要做的就是将 .content-header 和任何其他注释内容包装在块中，从而破坏嵌套。

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

<div class="comment">
  <div class="comment-wrapper">
    <div class="comment-header">
      <button class="btn-reply">Show only me</button>
    </div>
    <div class="comment-content">
      Some comment here
      <br/>More content
      <br/>And more content
    </div>
  </div>

  <div class="comment">
    <div class="comment-wrapper">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
      <div class="comment-content">
        Some comment here
        <br/>More content
        <br/>And more content
      </div>
    </div>
    <div class="comment">
      <div class="comment-wrapper">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
        <div class="comment-content">
          Some comment here
          <br/>More content
          <br/>And more content
        </div>
      </div>
      <div class="comment">
        <div class="comment-wrapper">
          <div class="comment-header">
            <button class="btn-reply">Show only me</button>
          </div>
          <div class="comment-content">
            Some comment here
            <br/>More content
            <br/>And more content
          </div>
        </div>

      </div>

    </div>
    <div class="comment">
      <div class="comment-wrapper">
        <div class="comment-header">
          <button class="btn-reply">Show only me</button>
        </div>
        <div class="comment-content">
          Some comment here
          <br/>More content
          <br/>And more content
        </div>
      </div>

    </div>
  </div>
  <div class="comment">
    <div class="comment-wrapper">
      <div class="comment-header">
        <button class="btn-reply">Show only me</button>
      </div>
      <div class="comment-content">
        Some comment here
        <br/>More content
        <br/>And more content
      </div>
    </div>

  </div>
</div>

Select 最里面 class 悬停

Select inner most class on hover

html

css

css-selectors