定位第一个子 CSS 样式组件答案

【问题标题】：target first-child css styled-components定位第一个子 CSS 样式组件
【发布时间】：2019-05-29 06:00:19
【问题描述】：

我正在使用 styled-components 并希望定位 Text 的第一个孩子，但我无法这样做。

const Text = styled.p`
    font-size: 12px;
    &:first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

【问题讨论】：

标签： css reactjs sass styled-components

【解决方案1】：

这样使用

const Text = styled.p`
   font-size: 12px;
    > * {
      &:first-child {
         margin-bottom: 20px;
      }
    }
`;

【讨论】：

这很好用，但是更新答案以包含它的工作原理会更加有用。

【解决方案2】：

最好在某些样式组件上使用 :last-of-type 而不是使用 :nth-child ，它可以完美运行

export default styled.div`
    :last-of-type {
        background: red;
    }`

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

【讨论】：

【解决方案3】：

终于，我得到了你的问题。样式化组件与前两个原生 p 标记混淆（从我的角度来看），这就是未应用 CSS 的原因。

我将使用这样的解决方法：

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

通过这样做，您将为 CSS 选择第三个子项（包括前两个 p 标记）

或者，您可以这样做：为标签添加类名并为该类提供 CSS。

const Text = styled.p`
  font-size: 12px;
  color: blue;
  &.colors {
    margin-bottom: 20px;
    color: red !important;
  }
`;

 <div>
    <p>I am just regular text</p>
    <p>Me too</p>
    <Text className="colors">Hello Joe</Text>
    <Text>Goodbye</Text>
</div>

这里是demo

希望对你有帮助:)

【讨论】：

我稍微更新了我的问题，p 标签中有一个span，这与它不起作用有关吗？很抱歉没有包括早些时候。另外，当我使用你的代码时，它都是蓝色的，所以出于某种原因，第一个孩子没有工作
太奇怪了，在这里仍然不适合我。无论如何都会给你们两个赞成票
@Thinker 大声笑我写了几乎完全相同的文字，还提供了使用两种不同颜色的演示。我想我们可能是 css-soulmates，.. 开个玩笑.. :D
你能检查更新的问题吗？这就是它关闭的原因
@peterflanagan 你是对的。现在我得到了这个问题。这是前两个p 标签的becz。我已经更新了我的解决方案。希望它有所帮助:)

【解决方案4】：

& 和 :first-child 之间不应有空格

&:first-child {
    margin-bottom: 20px;
}

【讨论】：

我也是这么想的，也试过了，还是不行
奇数。 font-size 属性是否适用？
我稍微更新了我的问题，p 标签中有一个span，这与它不起作用有关吗？很抱歉之前没有包括在内。
@dan 是对的，它是空的空间。查看此演示：一切正常：codesandbox.io/s/8882z34y19
你能检查更新的问题吗？这就是它关闭的原因