求解css相邻兄弟选择器该怎么去理解

Posted 2023-05-02

相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素.比如

http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp 如果还不能理解 就看看这块的参考手册

参考技术A '+' 或者 '~'

相邻兄弟没有获得 CSS 变量值

【中文标题】相邻兄弟没有获得 CSS 变量值

【英文标题】：Adjacent sibling not getting CSS variable value

【发布时间】：2020-03-20 01:34:20

【问题描述】：

我有一个React Header 组件，我用styled-components 设置样式。我有一个选择器，我用它来选择标题的下一个兄弟并给它一个顶部填充以在标题下保持一个清晰的空间，因为它有position: fixed。当我为这种样式使用正常值时，它工作得很好，但是一旦我使用 CSS 变量，我就可以使用媒体查询自定义高度，该变量不再在兄弟元素中被解析。这是我的代码：

export const S_Header = styled.header<HeaderProps>`
  --height: 20vw;

  position: fixed;
  top: 0;

  width: 100vw;
  height: var(--height);

  /* Give the next sibling a top padding so text doesn't flow underneath the header */
  + * 
    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;
  
`;

样式被应用到标题本身（高度正常工作），但兄弟姐妹上的 padding-top 在 Chrome 中具有值 var(--height) 这是正常的，但当我不显示任何计算值时悬停它。

【问题讨论】：

为什么不直接给那个兄弟姐妹它自己的类或 id 并直接设置它的样式？我也没有，我不确定+ 的用途，但通常我会使用&，所以也许你需要&* 之类的东西，只是猜测

CSS 自定义属性在级联时有效。这意味着它将适用于声明它的元素和元素的后代。兄弟姐妹不是后代，因此您面临这个问题。如果您真的想使用 css 自定义属性，请在 :root 伪元素内声明该属性（使用样式组件中的 createGlobalStyle）。如果您已经能够在您的样式中使用 js，最好将其存储为 js 变量并使用字符串插值 ($variable) 来调用它。

+ 是相邻兄弟选择器 [link](developer.mozilla.org/en-US/docs/Web/CSS/…)。我认为问题在于该选择器内的 var(--height) 试图获取所选元素上的变量，而不是对上面定义的 --height 变量的引用

@DennisMartinez 那么如何在媒体查询中更改该变量？

@JensM 你有这方面的例子吗？

【参考方案1】：

正如@DennisMartinez 所说，

“CSS 自定义属性在级联时起作用。这意味着它将在声明它的元素和元素后代上起作用。兄弟姐妹不是后代，因此您面临这个问题。”

这意味着很难解决这个问题。我相信以下解决方案可能是最好的，因为上面的限制使得很难想出更好的方法。

我最终声明了两次变量，一次在 Header 样式本身内，一次在同级选择器内。如果我愿意，我可以插入这个，这样我仍然可以有一个单一的事实来源。我希望通过媒体查询更改变量，所以我也声明了两次，在与变量相同的位置。如果需要，可以将此复制粘贴提取到字符串中并进行插值。

代码如下：

export const S_Header = styled.header<HeaderProps>`
  --height: 20vw;

  position: fixed;
  top: 0;

  width: 100vw;
  height: var(--height);

  @media ($devices.medium) 
    --height: 10vw;
  

  @media ($devices.large) 
    --height: 5vw;
  

  /* Give the next sibling a top padding so it doesn't start underneath the header */
  + * 
    --height: 20vw;

    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;

    @media ($devices.medium) 
      --height: 10vw;
    

    @media ($devices.large) 
      --height: 5vw;
    
  
`;

我也使用上面提到的插值写了这个：

const heightVar = "--height: 20vw;";

const mediaQuery = ` 
  @media ($devices.medium) 
    --height: 10vw;
  

  @media ($devices.large) 
    --height: 5vw;
  
`;

export const S_Header = styled.header<HeaderProps>`
  $heightVar

  position: fixed;
  top: 0;

  width: 100vw;
  height: var(--height);

  z-index: 98;

  transform: $(props): string =>
    props.visible === false ? "translateY(-100%)" : "none";

  background-color: $(props): string =>
    props.atTop ? "transparent" : props.bgColor;

  transition: transform 0.35s, background-color 0.35s ease-in-out;

  $mediaQuery

  /* Give the next sibling a top padding so it doesn't start underneath the header */
  + * 
    $heightVar

    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;

    $mediaQuery
  
`;