将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

- LJ Wadowski

---

你真的读了你引用的那个帖子吗？还是只看了一个答案就认为它是正确的？ - Abhitalks

“我想知道我犯了什么错误？” - 您似乎没有阅读您尝试使用的答案，并误解了:last-child选择器。 - David Thomas

.panel-i:not( [style*="display: none"]):last-child 选择最后一个子元素，如果它没有 display:none;。 - web-tiki

为什么不使用表格呢？它是一个表格视图。 - skobaljic

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）而言的，并非相对于它之前的选择器。

- George

Answer 2

简单解决方案

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

- Vitorino fernandes

Answer 3

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

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

- RahulB

Answer 4

我建议使用jQuery来实现这个功能，因为它提供了更多的灵活性和选项。我已经更新了这个示例。

示例链接：http://jsfiddle.net/kiranvarthi/d584ob1p/7/

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

- KiV

---

JavaScript通常不是一个可靠的布局工具。 - Ash Blue