可以在 HTML 元素上声明 CSS pseudo-class 吗？

Question

是否可以在 HTML 元素上设置 CSS pseudo-class？在这种特殊情况下，我希望某个 <div> 具有 last-child 属性.

当 IE11 无法将特定 <div> 识别为 last-child 而其他浏览器识别时，我问了自己这个问题。我找到了解决方法，此时我只想知道是否可以在 HTML 元素上设置 pseudo-class。

一位同事建议这实际上可能是使用 React 框架完成的。但是，我还没有找到任何暗示这是可能的。

Answer 1

没有

Pseudo-classes用于定义元素的状态。

Answer 2

是的，你可以。

这也必须在 JS 或 CSS 文件中，而不是据我所知的 HTML 文件。

例如，我在 img 上使用 :nth-child(4)，看不出它与 div 有什么不同。

这就是我在 JS 中使用它的方式：

$('#recipeStack img:nth-child(4)').css({
  'transform' : 'translate(160px, -160px)',
  'transition-delay' : '0.3s',
  'opacity' : '1'
});

在 CSS 文件中你的情况应该也很好：

.parent > div:last-child {
  background-color: red;
  color: white;
}

Can a CSS pseudo-class be declared on an HTML element?