CSS 转换不适用于：nth-child() [重复] 选择的元素答案

【问题标题】：CSS transform does not get applied on elements selected by :nth-child() [duplicate]CSS 转换不适用于：nth-child() [重复] 选择的元素
【发布时间】：2019-06-01 03:44:04
【问题描述】：

考虑以下 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 属性没有。谁能解释一下为什么会这样？

【问题讨论】：

标签： css css-selectors css-transforms

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

把你的css改成这样：

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

【讨论】：

【解决方案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>

【讨论】：