是否有“前一个兄弟”选择器？

我有同样的问题，但后来我有一个“呃”的时刻。而不是写

x ~ y

写

y ~ x

显然这匹配“x”而不是“y”，但它回答“有匹配吗？”问题，简单的 DOM 遍历可能比在 javascript 中循环更有效地让您找到正确的元素。

我意识到最初的问题是一个 CSS 问题，所以这个答案可能完全无关紧要，但其他 Javascript 用户可能会像我一样通过搜索偶然发现这个问题。

没有“前一个选择器”，但您可以使用 :not 和 ~ 的组合（“后选择器”）。没有逆序，没有javascript。

.parent a{ color: blue } .parent a.active{ color: red } .parent a:not(.parent a.active ~ a){ color: red }

我认为我的方法比“设置所有 div 的样式，而不是删除后 div 的样式”、使用 javascript 或使用相反的顺序更直接。

+ 用于下一个兄弟姐妹。是否有前一个兄弟姐妹的等价物？

您可以使用两个斧头选择器：！和 ？

常规 CSS 中有 2 个后续的兄弟选择器：

+ 是紧随其后的兄弟选择器

是任何后续的兄弟选择器

在传统的 CSS 中，没有先前的兄弟选择器。

但是，在 ax CSS 后处理器库中，有 2 个先前的兄弟选择器：

?是前一个兄弟选择器（与 + 相对）

！是任何先前的兄弟选择器（与〜相反）

工作示例：

在下面的示例中：

.any-subsequent:hover ~ div 选择任何后续的 div

.immediate-subsequent:hover + div 选择紧接着的 div

.any-previous：悬停！ div 选择任何以前的 div

.immediate-previous:hover ? div 选择前一个 div

div {显示：内联块；宽度：60px；高度：100px；颜色：RGB（255、255、255）；背景颜色：rgb(255, 0, 0);文本对齐：居中；垂直对齐：顶部；光标：指针；不透明度：0；过渡：不透明度 0.6s 缓出； } 代码 { 显示：块；边距：4px；字体大小：24px；行高：24px；背景颜色：rgba(0, 0, 0, 0.5); } div:nth-of-type(-n+4) { 背景颜色: rgb(0, 0, 255); } div:nth-of-type(n+3):nth-of-type(-n+6) { 不透明度: 1; .any-subsequent:hover ~ div, .immediate-subsequent:hover + div, .any-previous:hover ！ div, .immediate-previous:hover ? div {不透明度：1； }

将鼠标悬停在下面的任何块上

三个技巧：
基本上，在 HTML 中反转元素的 HTML 顺序，
以及使用~ 下一个兄弟姐妹操作员：

1. 使用 CSS Flex 和 row-reverse

.reverse { display: inline-flex; flex-direction：行反向； } .reverse span:hover ~ span { /* 在 SPAN 悬停时，目标是它的“先前”元素 */ background:gold; } 将鼠标悬停在 SPAN 上，查看之前的元素样式！

2.使用带方向的Flex：RTL

.reverse { display: inline-flex;方向：rtl； } .reverse span:hover ~ span { /* 在 SPAN 悬停时，目标是它的“前一个”元素 */ background: red; } 将鼠标悬停在 SPAN 上，查看之前的元素样式！

3. 使用浮动权

.reverse { 显示：内联块； } .reverse span{ 浮动：对； } .reverse span:hover ~ span { /* 在 SPAN 悬停时，目标是它的“前一个”元素 */ background: red; } 将鼠标悬停在 SPAN 上，查看之前的元素样式！

另一个 flexbox 解决方案

您可以在 HTML 中使用反转元素的顺序。然后除了在 Michael_B's answer 中使用 order 之外，您还可以根据您的布局使用 flex-direction: row-reverse; 或 flex-direction: column-reverse;。

工作样本：

.flex { 显示：弹性； flex-direction：行反向； /* 在“反转”端对齐内容，即开始 */ justify-content: flex-end; } /* 在悬停目标上它的“先前”元素 */ .flex-item:hover ~ .flex-item { background-color:lime; } /* 仅用于演示的样式 */ .flex-item { background-color: orange;白颜色;填充：20px；字体大小：3rem；边界半径：50%； }

目前没有官方方法可以做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制......（如果您担心导航器的兼容性，请检查 this link）

您可以做的是使用 CSS3 选择器：名为 nth-child() 的伪类

#list>* { 显示：内联块；填充：20px 28px；右边距：5px；边框：1px 实心#bbb；背景：#ddd；颜色：#444；边距：0.4em 0； } #list :nth-child(-n+4) { 颜色: #600b90;边框：1px 红色虚线；背景：橙色； }

橙子元素是使用 li:nth-child(-n+4) 选择的前一个兄弟 li

如果您知道确切位置，则基于 :nth-child() 的所有后续同级排除将起作用。

ul li:not(:nth-child(n+3))

这将选择第 3 个之前的所有 li（例如第 1 个和第 2 个）。但是，在我看来，这看起来很难看，而且用例非常紧凑。

您还可以从右到左选择第 n 个子项：

ul li:nth-child(-n+2)

哪个也一样。

在悬停时覆盖下一个兄弟姐妹的样式，以便看起来只有以前的兄弟姐妹在悬停时添加了样式。

ul li { 颜色：红色； } ul:hover li { 颜色: 蓝色; } ul:hover li:hover ~ li{ color: red; }

• 项目 1
• 项目 2
• 项目 3

根据您的确切目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性（即使存在父选择器）......

假设我们有：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做些什么来使用间距使 Socks 块（包括袜子颜色）在视觉上突出？

什么会很好但不存在：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在什么：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这会将所有锚链接设置为在顶部具有 15px 的边距，并将其重置为 0，以便在 LI 中没有 UL 元素（或其他标签）的链接。

/* 为所有子元素添加样式，然后将样式撤消到目标和目标的同级子元素。 */ ul>li { 颜色：红色； } ul>li.target, ul>li.target~li { 颜色：继承； }

• 之前
• 目标
• 之后
• 之后

不幸的是，没有“以前的”同级选择器，但您仍然可以通过使用定位（例如向右浮动）获得相同的效果。这取决于你想要做什么。

就我而言，我想要一个主要是 CSS 5 星评级系统。我需要为以前的星星着色（或交换图标）。通过向右浮动每个元素，我基本上得到了相同的效果（因此，星星的 html 必须写为“向后”）。

我在此示例中使用 FontAwesome 并在 fa-star-o 和 fa-star http://fortawesome.github.io/Font-Awesome/ 的 unicode 之间进行交换

CSS：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle：http://jsfiddle.net/andrewleyva/88j0105g/

我需要一个解决方案来选择前一个兄弟 tr。我使用 React 和 Styled-components 提出了这个解决方案。这不是我的确切解决方案（这是几个小时后的记忆）。我知道 setHighlighterRow 函数存在缺陷。

OnMouseOver 一行会将行索引设置为状态，并使用新的背景颜色重新渲染上一行

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

没有，而且有。

如果必须将标签放在输入之前，只需将标签放在输入之后，并将标签和输入都保留在 div 中，并将 div 设置为以下样式：

.输入框{显示：弹性；弹性方向：列反向； }

现在您可以应用 css 中可用的标准下一个兄弟样式选项，并且看起来您正在使用以前的兄弟样式。

没有这样的选择器，但是在 DOM API 中有一个漂亮的只读属性

Node.previousSibling

我找到了最简单的解决方案。它可能仅适用于您正在做的事情。

假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”：

由于没有先前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用，因此它们看起来相同。

.parent { 显示：弹性； flex-direction：行反向； }

现在您可以像这样选择它们。

.sibling_1:hover ~ .sibling_2 { #your CSS }

我有一个类似的问题，发现所有这种性质的问题都可以解决如下：

给你所有的物品一个风格。给你选择的项目一个风格。使用 + 或 ~ 为下一个项目指定样式。

这样，您就可以设置当前、以前的项目（所有项目都被当前和下一个项目覆盖）和下一个项目的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望它可以帮助某人。

这是类似问题的链接

CSS select all previous siblings for a star rating

因此，我使用每个人的回复发布我的解决方案，任何人都可以将其用作参考并可能推荐改进。

// 只是为了检查输入值 // Consts const starRadios = document.querySelectorAll('input[name="rating"]'); // EventListeners starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue)); // 获取星电台值 function getStarRadioValue(event) { alert(event.target.value) // 用它做点什么 }; .star-rating { 字体大小：1.5rem; unicode-bidi：双向覆盖；方向：rtl；文本对齐：左； } .star-rating.editable 标签：悬停 { 光标：指针； } .star-rating.editable .icon-star:hover, .star-rating.editable .icon-star:hover ~ .icon-star { background-color: #fb2727 !important; } .icon-star { 位置：相对；背景颜色：#72747d；宽度：32px；高度：32px；显示：内联块；过渡：背景颜色 0.3s 缓动； } .icon-star.filled { 背景颜色：#fb2727; } .icon-star > 标签 { display: inline-block;宽度：100%；高度：100%；左：0；顶部：0；位置：绝对； } .icon-star > 标签 > input[type="radio"] { position: absolute;顶部：0；左：0；变换：translateY(50%) translateX(50%);显示：无； }

对于我的用例，需要在焦点上更改以前的元素样式并悬停在父元素中只有 2 个项目。为此使用了 :focus-within 和 :hover 伪类。

就像这样在发生焦点/悬停事件时选择

.root-element:hover .element-to-style { background-color: red;} .root-element:focus-within .element-to-style { background-color: green;}

我遇到了同样的问题，当我尝试更改输入焦点上的前置图标填充颜色时，我的代码看起来像这样：

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

问题是我正在使用 vue-bootstrap 插槽来注入前置，所以即使我更改位置仍然会在输入后呈现

好吧，我的解决方案是滑动他们的位置，并添加自定义前置和使用 ~ 符号，因为 css 不支持以前的兄弟姐妹。

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

样式

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

所以只要尝试改变它的位置，必要时使用 css order 或 position: absolute;实现你想要的，并避免使用 javascript 来满足这种需求。

我通过将元素放入 flexbox 中然后使用 flex-direction: column-reverse 解决了这个问题。

然后我不得不手动反转 HTML 中的元素（以相反的顺序放置它们），它看起来很正常并且有效！

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>