使用样式化组件，为什么伪类在没有 & 符号的情况下仍然可以工作？

Question

我在docs 和其他地方读到& 指的是“回到主”样式组件，它位于其中。例如，在本例中，它指的是MyDiv，当 div 悬停时，div 的文本会变成红色：

const MyDiv = styled.div`
  &:hover { color: red; }
`

文档还说，当 & 号不存在时，CSS 声明将引用组件的子组件，但是，我注意到，特别是对于像 :hover 这样的伪类，如果我省略 & 号行为仍然相同。例如，使用下面的代码，我认为 hover 仅适用于子 Text 跨度，但如果您只悬停 div，跨度中的文本仍会变为红色。

const MyDiv = styled.div`
  :hover { color: red; }
  // these other style declarations are provided just to help 
  // illustrate what happens if you want to try this in a code editor:
  color: blue;
  border: 1px solid black;
  width: 100%;
  padding: 10px;
`
const Text = styled.span`
  border: 1px solid blue;
`

export default App() {
  render(
    <MyDiv>
      <Text>Hello world</Text>
    </MyDiv>
  )
}

如果有人能帮助阐明这一点，我将不胜感激！

Answer 1

在您的代码示例中：

const MyDiv = styled.div`
  :hover { color: red; }
  // these other style declarations are provided just to help 
  // illustrate what happens if you want to try this in a code editor:
  color: blue;
  border: 1px solid black;
  width: 100%;
  padding: 10px;
`
const Text = styled.span`
  border: 1px solid blue;
  // --> inherits text color of parent
`

export default App() {
  render(
    <MyDiv>
      <Text>Hello world</Text>
    </MyDiv>
  )
}

Text 组件或 span 从其父元素 div 继承颜色样式。

CSS Selectors

Selector	Example	Example Description
.class1 element	.name1 p	Selects all <p> elements inside elements with name name1
element element	div p	Selects all <p> elements inside <div> elements

注意在这个例子中sn-p div中的span继承了蓝色文本颜色，当div悬停时，span也继承了红色文本颜色。 div 之外的 span 不会继承蓝色或红色悬停颜色。

.testDiv {
  color: blue;
  border: 1px solid black;
  width: 100%;
  padding: 10px;
}

.testDiv:hover {
  color: red;
}

.testSpan {
  border: 1px solid blue;
}

<div class="testDiv">
  This is text in the parent div.
  <br />
  <span class="testSpan">This is text in a span wrapped by a parent div.</span>
</div>
<span class="testSpan">This is text in a span outside the div.</span>

CSS color 见Formal Definition

继承：是

和Inheritance

在 CSS 中，inheritance 控制没有值时发生的情况 为元素上的属性指定。

CSS 属性可以分为两种类型：

• 继承属性，默认情况下设置为父元素的计算值
• 非继承属性，默认设置为属性的初始值 参考任何 CSS 属性定义来查看是否有 特定属性是否默认继承（“继承：是”） （“继承：否”）。

发生了什么？

& 确实引用了父级，但让我们分解正在发生的事情。

1. & 指的是父元素，在本例中为 div。
2. :hover 是伪选择器，而不是选择器。

所以&:hover 和:hover 都只是选择div 的“已修改”选定状态。换句话说，&:hover 大致相当于div:hover。

将此与 & :hover 进行对比，其中空格是子选择器，或者在这种情况下，特别是选择父元素 div 的后代的“悬停”伪选择器。

试试这个：

const MyDiv = styled.div`
  &:hover {
    color: red;
  }
  
  & :hover {
    color: green;
  }

  color: blue;
  border: 1px solid black;
  width: 100%;
  padding: 10px;
`;

const Text = styled.span`
  border: 1px solid blue;
`;

<MyDiv>
  I'm the div text
  <Text>I'm the span text</Text>
</MyDiv>

注意，当 div 悬停时，div 和 span 都继承红色，但是当特别是 span 悬停时，它继承绿色，而 div 保持红色。