CSS选择器最后一个可见的孩子[重复]答案

【问题标题】：CSS selector last visible child [duplicate]CSS选择器最后一个可见的孩子[重复]
【发布时间】：2014-04-26 23:54:44
【问题描述】：

有没有办法在 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 的类。但是这个答案A CSS selector to get last visible div 例如不起作用。这里的问题是 :last-child 和 :not 不能组合。 :last-child([style="display: block"]) 也不起作用（当 li 有 display: block 时），因为它查看样式属性而不是 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>

【问题讨论】：

这里你可以做li[style] {border:none;} 但是，如果它设置在display:none; 有什么意义呢？
@GCyrillus 它可能是占位符...？
如何设置 display:none ？通过样式属性或类或其他。只要有 CSS 可以看到的特殊内容，请使用它:) 我的示例仅搜索具有 style 属性的 li，因为它是您要选择的那个
@Klaasvaak ，你想要什么你需要 javascript ，测试一个规则，然后选择前一个兄弟元素。 CSS 不能
@GCyrillus 我想答案是：不可能。我知道可以通过解决方法来完成，但这不是问题。

标签： css

【解决方案1】：

使用 CSS 是不可能的，但是您可以使用 jQuery 来做到这一点。 Try this clumsy code.

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

});

【讨论】：

很有趣，但是你确定它有效吗？ jsfiddle.net/sPK7m/1
是的——确实如此。它将类“red”添加到最后一个可见的孩子。
oki，我知道他想要隐藏元素之前的任何最后一个类型
很好的解决方法，但对我不起作用，因为它还需要响应。我想这（还）不可能仅使用 CSS。

【解决方案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;
}

【讨论】：