CSS 转换没有应用到由 :nth-child() 选择的元素

Question

考虑以下 HTML：

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

现在尝试在其上应用此 CSS：

p span:nth-of-type(2) {transform: rotateX( 180deg ) ; color: blue }

您会看到颜色在第二个跨度上发生了变化，但转换属性没有。谁能解释为什么会这样？

Answer 1

似乎是因为 css 转换仅适用于 "block" 元素。由于是 "inline" 元素，因此不会受到影响。

Answer 2

<span>默认有display: inline，你需要display:block或display:inline-block才能使transform生效。

p span:nth-of-type(2) {
  display: inline-block;
  transform: rotateX( 180deg);
  color: blue
}

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

Answer 3

参考 this post，span 是一个内联元素，转换属性将不起作用，除非您使用 "display:block;"，或者在您的情况下 "display:inline-block;"

将您的 css 更改为：

p span:nth-of-type(2){
  display: inline-block;
  transform: rotateX(180deg);
  color: blue;
}

Answer 4

:nth-child 不会应用到 class，只有它起作用的元素。您需要先申请 children 才能正常使用。

p span:nth-of-type(3) {
  display: inline-block;
  transform: rotateX( 180deg);
 }

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

CSS transform does not get applied on elements selected by :nth-child()