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。但是这个答案A CSS selector to get last visible div例如不起作用。这里的问题是：最后一个孩子和：不能合并。：last-child（[style =＆＃34; display：block＆＃34;]）也不起作用（当li有dispay：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做到这一点。 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;
    }

});

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

CSS选择器最后一个可见子

2 个答案: