html - 将 CSS 样式应用于最后一个可见元素

Question

我读过这篇文章: A CSS selector to get last visible div

但是，它对我不起作用。我想知道我哪里弄错了吗？

我的 CSS

.panel-i{
   position: relative;
   margin: 4px 0;
   text-align: right;
   border: 1px solid;
   border-right: none;    
   min-height: 76px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 8px 10px 0;
   -webkit-flex: 1 1 30%;
   -moz-flex: 1 1 30%;
   -ms-flex: 1 1 30%;
   flex: 1 1 30%;  /* flex-grow flex-shrink, flex-basis */
 }

.panel-i:not( [style*="display: none"]):last-child{
    border-right: 1px solid;
}

和 HTML

<div class="money_boxesRow">
   <div class="panel-i">
       <div class="panel-i-label">
          One Off Charge                                    
       </div>
       <span>                        
           £ <span id="total_one_off_charge">0.00</span>
       </span>
   </div>

   <!-- ... -->

   <div class="panel-i so_hide_commissions" style="display: none;">
      <div class="panel-i-label">
           Commission Total                                    
      </div>
      <span>                        
          £ <span id="total_commission">0.00</span>
      </span>
   </div>
</div>

我试图在最后一个可见框的右侧添加边框...但它没有出现。

JSFIDDLE

Answer 1

以下选择器:

.panel-i:not( [style*="display: none"]):last-child

不针对 .panel-i:not( [style*="display: none"]) 选择中的最后一个。它的目标是父级的最后一个子级，条件是满足 .panel-i:not( [style*="display: none"])

:last-child 相对于元素的父元素(因此名称中有 child)。它与之前的选择无关。