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

Question

能百度到的有 &gt;和+这样的符号，分别控制子元素、下一个兄弟元素。 如 {代码...} 我想知道的是，有没有更多这样的符号？比如能实现选择上一个兄弟元素？

伊谢尔伦 · Answer

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

伊谢尔伦 · Answer

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;
}

高洛峰 · Answer

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

PHP中文网 · Answer

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.