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 }

您将看到第二个跨度上的颜色已更改，但是transform属性没有更改。谁能解释为什么会这样？

Answer 1

似乎原因是CSS转换仅适用于“块”元素。由于是“内联”元素，因此不会受到影响。

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帖子，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不适用于该类，仅适用于该元素。您需要先向孩子申请，然后才能正常工作。

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

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