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

OnMouseOver一行会将行索引设置为state，并使用新的背景色重新阅读前一行

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;
    }
`;

我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作

x ~ y

写

y ~ x

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

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

你可以使用双重否定

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

用TAG或.CLASS替换SELECTOR（使用#ID可能太具体）。将FILTER替换为其他：PSUEDO-SELECTOR（我只尝试过：悬停）或.CLASS（更多关于通过Javascript切换的信息）。

因为典型的用法可能依赖于悬停（参见下面的示例）

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/*解决方案*/div.parent:hover>div.child:not（：hover）：not（：悬停~.child）{背景色：红色；边界半径：1.5em；}div.parent:hover>div.child:not（：hover）：not（：悬停~.child）>div{背景色：黄色；}/*做得漂亮（有点）*/分部租金{宽度：9em；高度：9em；/*布局*/显示：栅格；栅格样板列：自动自动；栅格样板行：自动自动；}分部子项{/*尺寸*/高度：3em；宽度：3em；/*布局*/位置：相对；/*光标*/光标：指针；/*演示文稿*/边框：1px黑色实心；边界半径：1.5em；}.星{/*尺寸*/宽度：2.5em；高度：2.5em；/*放置*/位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；/*几何形状*/-webkit剪辑路径：多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);剪辑路径：多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);/*演示文稿*/背景色：浅灰色；}div.child:悬停{/*演示文稿*/背景色：黄色；边界半径：1.5em；}div.child:悬停>div.star{/*演示文稿*/背景色：红色；}<div class=“parent”><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div></div>

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

假设我们有：

<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>

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

什么会很好，但不存在：

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元素（或其他标签）的链接。

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

在我的情况下，我想要一个主要的CSS五星评级系统。我需要为之前的星星上色（或更换图标）。通过将每个元素向右浮动，我基本上得到了相同的效果（因此，星星的html必须写为“向后”）。

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

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/

另一种flexbox解决方案

您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外，还可以使用灵活的方向：行反转；或弯曲方向：列反转；这取决于您的布局。

工作样本：

.flex弯曲{显示：柔性；弯曲方向：行反转；/*在“反转”结尾（即开头）对齐内容*/调整内容：柔性端；}/*在悬停目标上，其“先前”元素*/.flex项：悬停~.flex项{背景色：石灰；}/*仅用于演示的样式*/.flex项目{背景色：橙色；颜色：白色；填充：20px；字体大小：3rem；边界半径：50%；}<div class=“flex”><div class=“flex item”>5</div><div class=“flex item”>4</div><div class=“flex item”>3</div><div class=“flex item”>2</div><div class=“flex item”>1</div></div>