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>
我想知道的是，有沒有更多這樣的符號？比如能實現選擇上一個兄弟元素？
問題解答
回答1：只用css的話是不行的，css選擇器是向下選擇的，沒法向上選擇，你可以試下sass或者js實現；；；如果一定要通過css讓一個元素(a)控制另一個元素(b)，那只能讓b成為a的子元素或放到a后面
回答2：沒有直接的方案，但有另外幾個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>回答3：謝邀
http://www.runoob.com/cssref/... 這個能給你很大幫助
回答問題前先說一個問題，就是不要濫用 # ,在css中代表了id選擇器,由于id選擇器的權重過高,同級下不能存在相同的id（即使能通也不推薦相同id）,如果有需要多個相同的容器，希望可以選擇 . 類選擇器
先這個查找上一個兄弟元素的符號，在我印象里css里是沒有的。因為css的寫法順序決定了結果，在#a后寫的內容就算加選擇器，能選擇的也就只能事#a后方或者下方的元素了。
比較類似的符號 ~ , #a:hover ~ .c 指的是#a后面所有的.c
畢竟css用不著太多復雜的邏輯，實在有需要的話拿js控制吧。
以上一點薄見回答4：可以說是一個邏輯問題……
選擇子元素或下一個兄弟元素，是以當前元素為參照的。要選擇“上一個兄弟元素”，可以選擇以“上一個兄弟元素”為參照，給個class或id，那么相對地“當前元素”就是“下一個兄弟元素”了。。。
可以用 + 和 > 實現的功能，不需要再定義多類似的偽類選擇器，記起來也易混淆。
網公網安備