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

Question

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

伊谢尔伦 · Answer

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

伊谢尔伦 · Answer

沒有直接的方案，但有另外幾個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;
}

高洛峰 · Answer

謝邀

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

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

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

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

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

以上一點薄見

PHP中文网 · Answer

可以說是一個邏輯問題…

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

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