最近的跨度元素选择器 - 样式组件答案

【问题标题】：Closest span element selector - styled components最近的跨度元素选择器 - 样式组件
【发布时间】：2020-11-04 08:23:24
【问题描述】：

我正在尝试让样式化组件与选择最近的 span 元素一起工作

<label>
   <span className="">Password</span>
   <input type="password" id="passwordInput" />
</label>

     span {
          position: absolute;
          font-size: 14px;
          height: 40px;
          color: #a2a2a2;
          line-height: 40px;
          right: 0;
          left: 8px;
          cursor: auto;
        }
        input {
          height: 40px;
          padding-left: 8px;
          padding-top: 10px;
          padding-bottom: 10px;
          width: 100%;
          border: 1px solid #dbdbdb;
          background-color: #fafafa;
          border-radius: 3px;
          cursor: auto;
          font-size: 16px;

          &:focus {
            & + span {
              background-color: red;
            }
            outline: #a2a2a2;
            border: 1px solid #a2a2a2;
          }
        }

我不知道该怎么做，这就是我现在正在尝试的方法，但它不起作用。最好我想让它们在不给出跨度、特定类的情况下工作。

【问题讨论】：

你不能使用 CSS。您不能选择前面的同级。您可以更改标记以将跨度放在输入元素之后，然后使用 CSS 将它们移动到您想要的位置。
这能回答你的问题吗？ Is there a "previous sibling" selector?

标签： html css reactjs styled-components

【解决方案1】：

您确实在使用Adjacent Sibling Combinator，但它仅适用于左侧选择器之后的选择器-

相邻兄弟组合子 (+) 分隔两个选择器，并且仅当第二个元素立即跟在第一个元素之后，并且两者都是相同的子元素时才匹配第二个元素父元素。

这意味着如果您将input 标签放在首位，那么它会起作用。不幸的是，目前还没有“前一个兄弟姐妹”这样的东西，因此您最好的选择是考虑另一种方式来构建您的标记和/或 CSS。

【讨论】：

请不要回答已经标记重复的问题。