'& > * + *' 在 JSX (CSS) 中是什么意思？ [复制]答案

【问题标题】：What does '& > * + *' mean in JSX (CSS)? [duplicate]'& > * + *' 在 JSX (CSS) 中是什么意思？ [复制]
【发布时间】：2021-06-26 01:09:27
【问题描述】：

在material UI中，进度条demo中有几行JSX如下：

'& > * + *': {
      marginTop: theme.spacing(2),
    },

这里的'& > * + *'是什么意思？

【问题讨论】：

【解决方案1】：

这就是所谓的脑叶切除猫头鹰。它是一个选择器，用于获取具有紧接在前的兄弟元素的每个元素，这样它将获取除父元素的第一个元素之外的所有元素。

ul > * + * {
  background: red;
  margin-top: 2rem;
}

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

从 sn-p 中可以看出，它会将 margin-top 和 background 分配给除第一个之外的所有 li 元素。

它很棒，例如，在所有元素之间添加边距，但不必做额外的样式来从第一个或最后一个元素中删除边距。

这纯粹是一个 CSS 特性，与 React 或 JSX 无关。

阅读更多关于它的信息here 或观看教我的视频here

【讨论】：

【解决方案2】：

它是一个选择器。匹配所有兄弟姐妹。

<div class="wrapper">
    <p>1</p>
    <p>2</p>
<div>

第二个 p 有红色背景。

注意：第一个 p 不匹配。

.wrapper {
  width: 100%;
  height: 100%;
  font-size: 16px;
  & > * + * {
    background-color: red;
  }
}

& 是父选择器。 > 是子组合器。 + 是相邻的兄弟组合。

【讨论】：