搜尋

首頁  >  問答  >  主體

css3 - CSS伪类选择器,如何选择并控制相邻的上一个标签?

能百度到的有 >和+这样的符号,分别控制子元素、下一个兄弟元素。

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<p id='a'>元素1
  <p id='b'>元素2</p>
</p>
<p id='c'>元素3
  <p id='b'>元素2</p>
</p>
</body>
</html>


我想知道的是,有没有更多这样的符号?比如能实现选择上一个兄弟元素?

天蓬老师天蓬老师2837 天前1124

全部回覆(4)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-04-17 12:01:17

    只用css的話是不行的,css選擇器是向下選擇的,沒法向上選擇,你可以試下sass或js實現;;;
    如果一定要透過css讓一個元素(a)控制另一個元素(b),那隻能讓b成為a的子元素或放到a後面

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 12:01:17

    沒有直接的方案,但有另外幾個CSS3的偽類或許可以解決一些問題。

    p:first-of-type:指定父元素的首個 p 元素的背景色

    #a~#c:hover:c元素上面必須有a。

    感受一下:

    .start {
      display: flex;
    }
    .start > p {
      height: 30px;
      width: 30px;
      margin-right: 4px;
      border: 1px solid #999;
      cursor: pointer;
    }
    .start:hover > p {
      border-color: #f50;
    }
    .start > p:hover,
    .start > :hover ~ p {
      border-color: #999;
    }
    <p class="start">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 12:01:17

    謝邀

    http://www.runoob.com/cssref/... 這能給你很大幫助

    回答問題前先說一個問題,就是不要濫用# ,在css中代表了id選擇器,由於id選擇器的權重過高,同級下不能存在相同的id(即使能通也不建議相同id),如果有需要多個相同的容器,希望可以選擇. 類選擇器

    先這個找出上一個兄弟元素的符號,在我印象裡css裡是沒有的。因為css的寫法順序決定了結果,在#a後寫的內容就算加選擇器,能選擇的也就只能事#a後方或者下方的元素了。

    比較類似的符號 ~ , #a:hover ~ .c 指的是#a後面所有的.c

    畢竟css用不著太多複雜的邏輯,實在有需要的話拿js控制吧。

    以上一點薄見

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 12:01:17

    可以說是一個邏輯問題…

    選擇子元素或下一個兄弟元素,是以當前元素為參照的。 要選擇“上一個兄弟元素”,可以選擇以“上一個兄弟元素”為參照,給個class或id,那麼相對地“當前元素”就是“下一個兄弟元素”了。 。 。

    可以用 + 和 > 實現的功能,不需要再定義多類似的偽類選擇器,記起來也容易混淆。

    回覆
    0
  • 取消回覆