Question

当我在元素中递归时，我想选择最内层的类当您将鼠标悬停在.comment上时，只会显示此div .btn-reply 元素是在PHP端生成的（不包括在内）。

所以基本上如何选择大多数内部类元素而不选择父元素中的相同类元素（.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

在hover上使用.comment-header，因为其他.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 2

由于无法选择元素的第一个父元素，我所要做的就是将.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>

Answer 3

如何将:last-child添加到评论标题

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

在悬停时选择最内层的班级

3 个答案: