加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

我需要一个解决方案来选择上一个兄弟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;
    }
`;

其他回答

选择器级别4建议:has()(以前是主题指示符!),有一天,它将允许您选择前一个兄弟姐妹:

previous:has(+ next) {}

或(对于一般上一个兄弟姐妹而不是相邻兄弟姐妹):

previous:has(~ next) {}

在撰写本文时:has{}被大多数但不是所有主要浏览器支持。支持正在改善。


多年来,这个答案吸引了数十条“仍然不支持”的评论(现已删除)。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。

另一种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>

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中,只需执行以下操作:

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div,然后从child-2 div中选择child-1 div。

如果您使用jQuery,只需执行以下操作:

$(".child-2").prev()

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

假设我们有:

<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中有两个后续的同级选择器:

+是紧接其后的同级选择器~是任何后续的同级选择器

在传统的CSS中,没有以前的同级选择器。

然而,在axe CSS后处理器库中,有两个先前的同级选择器:

? 是前一个同级选择器(与+相反)! 是之前的任何同级选择器(与~相反)

工作示例:

在以下示例中:

.any后续:hover~div选择任何后续div立即后续:hover+div选择立即后续div.任何以前的:悬停!div选择之前的任何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:第n个类型(-n+4){背景色:rgb(0,0,255);}div:第n种类型(n+3):第n个类型(-n+6){不透明度:1;}.any后续:hover~div,.紧随其后:hover+div,.任何以前的:悬停!div中,.上一个:悬停?第二部分{不透明度:1;}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div><div class=“immediate previor”>悬停<code></代码>选择器</div><div class=“any previous”>悬停<code></代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>