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

Question

我已经读过这个帖子: 一个CSS选择器来获取最后一个可见的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在名称中).它与之前的选择无关.

Answer 2

简单的解决方案

\n\n

演示 - http://jsfiddle.net/d584ob1p/9/

\n\n

添加

\n\n

.panel-i:not(:first-child){\n    border-left: 0;\n}\n

\n\n

border-right从......中去除.panel-i

\n\n

.panel-i{\n    border-right: none;  /** remove **/\n}\n

\n\n

\r\n

\r\n

.panel-i:not(:first-child){\n    border-left: 0;\n}\n

\r\n

.panel-i{\n    border-right: none;  /** remove **/\n}\n

\r\n

\r\n

\r\n

\n