相关疑难解决方法(0)

一个棘手的CSS选择器问题,不知道它是否可能.

让我们说这是HTML布局:

<div></div>
<div></div>  
<div></div>  
<div style="display:none"></div>
<div style="display:none"></div>  

我想选择div显示的最后一个(即不是display:none),这将是div给定示例中的第三个.请注意,div真实页面上的s 数量可能不同(甚至是display:none那些).

有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().

有人可以解释原因吗？

如何选择li没有.hidden课程的最后一个？

我有像这样的HTML和CSS:

ul li:last-child:not(:first-child):not(.hidden) button {
  background-color: red;
}

    <ul>
      <li>
        <button>1</button>
      </li>
      <li>
        <button>2</button>
      </li>
      <li class="hidden">
        <button>3</button>
      </li>
    </ul>

对于你们来说,这是一个棘手的挑战,CSS选择器可以获得:last-child没有类的东西.

到目前为止我尝试了什么:

.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}

我有类似的查询选择器,做一些有趣的东西,所以我宁愿尝试通过CSS做到这一点.移动项目的数量可以变化.

// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)

在所有情况下,以下将给我最后一个孩子,但我希望最后一个孩子不是仅限移动的孩子.

.navigation-item--top:last-child

目标

generic generic generic generic generic mobile mobile
                                   ^
                             target this one

HTML

<ul class="nav-items-list">
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item nav-item--mobile"></li>
    <li class="nav-item nav-item--mobile"></li>
</ul>

是的我可以找出生成的导航中哪一个是正确的,或者我可以用JS找到它.