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）。它与之前的选择无关。

Answer 2

简单的解决方案

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

添加

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

从border-right

中删除.panel-i

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

从border-right: none

中删除.panel-i

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

Answer 4

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

FIDDLE：http://jsfiddle.net/kiranvarthi/d584ob1p/7/

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

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

4 个答案: