在懸停上選擇最內層

我想在元素中遞歸時選擇最內層的類。
當您將鼠標懸停在.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>

來源

2015-01-21 Justinas

在快速瀏覽，更改'的.comment：懸停>的.comment報頭> .btn-reply'到'的.comment>的.comment頭：懸停> .btn-reply' 。（問題在於，當你將鼠標懸停在嵌套的'comment'上時，你總是將鼠標懸停在其父'comment（s）'處，因此'.comment：hover> .comment-header> .btn-reply'總是適用於所有這些）。 – 2015-01-21 11:41:28

你不能用CSS實現這個結果，因爲鼠標懸停在父項上也是如此;爲了否定（或適應），我們需要一個父選擇器（在CSS4選擇器模塊的「完整」配置文件之外，它尚不存在）。 – 2015-01-21 11:53:08

只是爲了澄清，你是否必須定位評論塊（.comment）？你可以只是目標的評論頭div而不是實現效果？例如comment-header：hover> .btn-reply，然後只顯示該特定標題中的按鈕 – Fox 2015-01-21 13:26:26

由於沒有可以選擇元素的第一父，所有我必須做的是包裝.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>

來源

2015-01-21 13:50:27 Justinas

-1

如何添加:last-child到您的評論標題

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

上 .comment-header其他 .comment-headers的沒有嵌套在那裏

來源

2015-01-21 11:42:40 Arty

它不起作用，因爲在第一個'.comment'上懸停不會顯示'.btn-reply' – Justinas 2015-01-21 11:59:34

對不起，當你說最內層時，我會錯過閱讀。評論標題：懸停如上將做的伎倆。 – Arty 2015-01-21 13:30:40

使用hover：

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

來源

2015-01-21 13:26:18 Curt

在懸停上選擇最內層

回答

相關問題