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

【问题标题】：Apply CSS style to last visible element将 CSS 样式应用于最后一个可见元素
【发布时间】：2015-01-09 06:33:46
【问题描述】：

我读过这个帖子： 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

【问题讨论】：

您真的阅读了您引用的主题吗？或者您只是阅读了一个答案并认为它是正确的？
“我想知道我在哪里犯了错误？” - 您似乎没有阅读您尝试使用的答案，并且误解了 :last-child 选择器。
.panel-i:not( [style*="display: none"]):last-child 如果没有display:none;，则选择最后一个孩子。
为什么不用table，它是表格视图。

标签： html css

【解决方案1】：

以下选择器：

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

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

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

【讨论】：

【解决方案2】：

从.panel-i 中删除border-right: none

http://jsfiddle.net/d584ob1p/4/

【讨论】：

【解决方案3】：

我建议使用 jQuery 来实现这一点。在那里您可以获得更多的灵活性和选择。我已经更新了小提琴。

小提琴：http://jsfiddle.net/kiranvarthi/d584ob1p/7/

$('.panel-i:visible:last').addClass('newclass')

【讨论】：

JavaScript 通常不是一个依赖布局的好主意。

【解决方案4】：

简单的解决方案

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

添加

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

从.panel-i 中删除border-right

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

.money_boxesRow {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}
.panel-i {
  position: relative;
  margin: 4px 0;
  border: 1px solid;
  text-align: right;
  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-label {
  text-transform: uppercase;
  font-size: 1.4em;
}
.panel-i > span {
  font-size: 3.2em;
  display: block;
  font-family: 'PT sans narrow';
  font-weight: bold;
}
.panel-i:not(:first-child) {
  border-left: 0;
}

<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">
    <div class="panel-i-label">Monthly Charge</div> <span>                        
            £ <span id="total_monthly_charge">0.00</span>
    </span>
  </div>
  <div class="panel-i">
    <div class="panel-i-label">Monthly Charge Total</div> <span>                        
            £ <span id="total_lease">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>

【讨论】：