Question

我正在为特定JS事件上的元素动态添加类或从中删除类。我想做的是用CSS选择没有这些类的最后一个子元素。

示例1

<container-element>
  <h2></h2>
  <div class='some-class'></div>
  <div></div>
  <div></div> <!-- select this div -->
</container-element>

示例2

<container-element>
  <h2></h2>
  <div></div>
  <div></div> <!-- select this div -->
  <div class='some-class'></div>
</container-element>

是否可以编写 CSS选择器来做到这一点？

某事像container-element > div:not(.select):last-of-type吗？

Answer 1

每this answer，从技术上讲，解决方案将是vbCrLf。

但是，container-element > div:nth-last-child(1 of :not(.select)) is still not supported by any browser other than Safari中的of S子句。

Answer 2

您是说：选择最后一个不包含class属性的兄弟。

我认为当前可用的CSS不可能实现。

您要让瀑布（小瀑布）向上运行。浏览器需要检查最后一个元素，然后检查它之前的元素。这不是CSS的工作方式。

div:not(.some-class):last-of-type不起作用，因为浏览器不会自动向上移动到下一个兄弟姐妹。

Answer 3

我当然可以用JS做到这一点，但首选纯CSS解决方案。据说不可能有一个纯粹的CSS解决方案，所以下一个最好的事情就是带有一些额外HTML的CSS解决方案。

技巧是向所有元素添加一个类not-selected，然后使用CSS选择器从要定位的元素中删除该类。

CSS选择器将为div:not([class*='not-selected'])。

div:not([class*='not-selected']) {
  background: red;
}

<button type='button'>
  <h2>title</h2>
  <div class='not-selected'>option one</div>
  <div>option two</div>
  <div class='not-selected'>option three</div>
</button>

选择没有课程的最后一个元素

3 个答案: