相关疑难解决方法(0)

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

如何选择具有类名称的"最后一个孩子":list？

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的例子不起作用,但是有什么类似的东西可以工作吗？

重要:

a)我不能使用ul li:nth-child(3),因为它可能发生在第四或第五位.

b)没有JavaScript.

任何帮助将不胜感激,谢谢!

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([style ="display:block"])也不起作用(当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>