search

Home  >  Q&A  >  body text

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>

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

天蓬老师天蓬老师2821 days ago1108

reply all(4)I'll reply

  • 伊谢尔伦

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

    It won’t work if you only use css. The css selector selects downwards and cannot select upwards. You can try sass or js;;;
    If you must select an element (a) through css To control another element (b), you can only make b a child element of a or put it behind a

    reply
    0
  • 伊谢尔伦

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

    There is no direct solution, but there are several other CSS3 pseudo-classes that may solve some problems.

    p:first-of-type: Specify the background color of the first p element of the parent element

    #a~#c:hover: The c element must have a above it.

    Feel it: 

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

    reply
    0
  • 高洛峰

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

    Thank you for the invitation

    http://www.runoob.com/cssref/... This can help you a lot

    Before answering the question, let me say one question, that is, don’t abuse #. css represents the id selector. Since the weight of the id selector is too high, the same id cannot exist at the same level. 🎜> (Identical id is not recommended even if it works), if you need multiple identical containers, I hope you can choose the . class selector

    First, the symbol for searching the previous sibling element is not found in css in my impression. Because the order of writing css determines the result, even if a selector is added to the content written after #a, the only elements that can be selected are the elements behind or below #a.

    Similar symbols ~ , #a:hover ~ .c refers to all #a.c after

    After allcss you don’t need too much complicated logic, just use js to control it if necessary.

    The above points are superficial

    reply
    0
  • PHP中文网

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

    It can be said to be a logical problem...

    Selecting child elements or next sibling elements is based on the current element. To select the "previous sibling element", you can choose to use the "previous sibling element" as a reference and give a class or id, then the "current element" will be the "next sibling element". . .

    The functions that can be implemented using + and > do not need to define many similar pseudo-class selectors, and it is easy to confuse them in memory.

    reply
    0
  • Cancelreply