CSS选择器最后一个可见的子元素

Question

在CSS中是否有一种方法可以在不知道使元素不可见的类的情况下将CSS规则应用于最后一个可见的子元素?

的例子:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li style="display: none">Item 5</li>
<ul>
<style>
  ul > li {
    border: 1px solid black;
  }
  // Remove right border from last visible child
  // This does not work of course, but this is what I am looking for
  ul > li:last-child:not([style="display: none"]) {
    border-right: none;
  }
</style>

要明确:我正在寻找一个基于规则的选择器，而不是基于CSS而不是Javascript的类。但是这个答案一个CSS选择器得到最后一个可见的div，例如不工作。这里的问题是:last-child和:not不能组合。:last-child([style="display: block"])也不起作用(当li具有display: block时)，因为它查看style属性而不是CSS规则。

bootstrap中的示例(注意:hidden-md是一个示例，它也可以是使用display:none的其他类):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="hidden-md">Item 5</li>
<ul>

Answer 1

使用CSS是不可能的，但是您可以使用jQuery。试试这段蹩脚的代码。

jQuery:

 $('li').not(':hidden').last().addClass("red");

HTML:

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

CSS:

.hideme {
    display:none;
}
.red {
    color: red;
}

---

jQuery(以前的解决方案):

var $items = $($("li").get().reverse());
$items.each(function() {
    if ($(this).css("display") != "none") {
        $(this).addClass("red");
        return false;
    }
});

Answer 2

在CSS中是不可能的:)

也许如果您从下一个元素或下一个伪元素的左边框绘制右边框，您可以完成一半的工作:http://codepen.io/gc-nomade/pen/ohKwv/

/* basic and naive workaround for borders */
  ul {
  text-align:center;
}li {
   display:inline-block;
   padding:0 1em
 }
li + li {
  border-left:solid;
}
ul:hover li:nth-child(even) {/* test : hide every even lis at once */
  display:none;
}