css - :first-child selector not applying in emotion css

Question

我有一个样式组件如下

const StyledCustomComponent = styled.aside`
min-width: ${gridPts(19)};
background-color: ${HIGHLIGHT_BLUE};
flex: 0 0 auto;
${fontSize(13)}
padding: ${gridPts(2)};

@media only screen and (max-width: ${MQ_320}) {
padding: ${gridPts(1)};
}

@media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {

  &:first-child {
    margin-top: 0;
  }
}
`

当我在浏览器中检查它并调整大小以匹配媒体查询时， :first-child 样式不适用。

并且上述组件的子组件样式如下

const StyledCustomComponentChild = css`
  margin: ${gridPts(1)} ${gridPts(1)} 0;
  @media only screen and (max-width: ${MQ_575}), (min-width: ${MQ_961}) and (max-width: ${MQ_1285}) {
      display: inline-block;
      float: left;
      margin-right: ${gridPts(1)};

      & * {
        display: inline-block;
        margin-right: ${gridPts(1)};
      }
  }

  @media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
    display: block;
    line-height: 1.5em;
    margin: ${gridPts(3)} 0;
    white-space: nowrap;
     &:first-child {
      display: block;
    }
  }
`

此样式应用于组件本身而不是其第一个子组件

这是在浏览器开发工具中如何解释样式的屏幕截图



注意没有 space之前 :first-child如果我通过开发工具手动添加一个空格，则按预期应用样式

import styled from 'react-emotion'

const StyledDiv = styled.div`
	color: turquoise;
& :last-child {			
	color:green;
		}
	& :first-child {
		color: red;
	}
	
`
render(
	<StyledDiv>
<p>First</p>
<p>Second</p>
<p>third</p>
<p>last</p>
	</StyledDiv>
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

谁能猜出可能是什么问题？

Answer 1

两个选择器都适合我。使用类似 <div/> 的标签或 <p/>等之前 :last-child (取决于您的代码，它也可能是另一个标签)。

export const blogSection = css`
  disaply:flex
  & div:last-child {
  background: #ff0000;
  }
`;