搜索

首页  >  问答  >  正文

有没有“前一个兄弟”选择器?

<p>加号选择器 (<code>+</code>) 用于选择下一个相邻的兄弟元素。</p> <p>是否有一个等效的选择器用于选择前一个兄弟元素?</p>
P粉615829742P粉615829742498 天前578

全部回复(2)我来回复

  • P粉742550377

    P粉7425503772023-08-16 12:58:21

    我找到了一种方法来为所有先前的兄弟元素(与~相反)设置样式,这取决于您的需求。

    假设您有一个链接列表,当悬停在其中一个链接上时,所有先前的链接都应该变成红色。您可以这样做:

    /* 默认链接颜色为蓝色 */
    .parent a {
      color: blue;
    }
    
    /* 先前的兄弟元素应为红色 */
    .parent:hover a {
      color: red;
    }
    .parent a:hover,
    .parent a:hover ~ a {
      color: blue;
    }
    <div class="parent">
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#">链接</a>
    </div>

    回复
    0
  • P粉014293738

    P粉0142937382023-08-16 10:22:08

    不,没有“前一个兄弟选择器”。

    相关的是,~ 是用于一般的后继兄弟选择器(意味着元素在此元素之后,但不一定紧随其后),是一个CSS3选择器。 + 是用于下一个兄弟选择器,是CSS2.1。

    请参见来自Selectors Level 3相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification5.7 相邻兄弟选择器

    回复
    0
  • 取消回复