首頁  >  問答  >  主體

是否有一個選擇器用於選擇前面的同級元素?

加號選擇器( )用於選擇下一個相鄰的兄弟。

上一個兄弟姊妹有等效的嗎?

P粉512363233P粉512363233397 天前633

全部回覆(2)我來回復

  • P粉486743671

    P粉4867436712023-10-10 20:17:35

    我找到了一種方法來設計所有先前的同級(與 ~ 相反)的樣式,該方法可能會根據您的需求而起作用。

    假設您有一個連結列表,當滑鼠懸停在其中一個連結上時,之前的所有連結都應變為紅色。你可以這樣做:

    /* default link color is blue */
    .parent a {
      color: blue;
    }
    
    /* prev siblings should be red */
    .parent:hover a {
      color: red;
    }
    .parent a:hover,
    .parent a:hover ~ a {
      color: blue;
    }
    <div class="parent">
      <a href="#">link</a>
      <a href="#">link</a>
      <a href="#">link</a>
      <a href="#">link</a>
      <a href="#">link</a>
    </div>

    回覆
    0
  • P粉550823577

    P粉5508235772023-10-10 19:15:30

    不,沒有「前一個兄弟」選擇器。

    與此相關的是,~ 用於一般後繼同級元素(表示該元素位於該元素之後,但不一定緊接在後),並且是一個 CSS3 選擇器。 代表下一個兄弟,是 CSS2.1。

    請參閱相鄰同級組合器 "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">選擇器等級3 和5.7 相鄰同級選擇器 來自層疊樣式表2 級修訂版1 (CSS 2.1) 規範

    回覆
    0
  • 取消回覆