CSS :last-of-type and :before is not working

Question

我在应用 :last-of-type 和 :before 时遇到问题。

我有以下内容:

.stepwizard-row:before {
  position: absolute;
  top: 0px;
  content: " ";
  width: 1px;
  height: 100%;
  background-color: #97D3FD;
}
.stepwizard-row:before:last-of-type {
  position: absolute;
  top: 0px;
  content: " ";
}

但是，:before:last-of-type 似乎没有任何效果。

我做错了什么？

Answer 1

你的顺序错了，应该是:

.stepwizard-row:last-of-type:before {}

CSS3 Selectors - 7. Pseudo-elements

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

顺便说一下，使用 .class:last-of-type 可能会出现意想不到的行为，它真的应该与元素一起工作，例如.parent > div:last-of-type.

6.6.5.9. :last-of-type pseudo-class

Same as :nth-last-of-type(1). The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.