css3 - CSS偽類選擇器，如何選擇并控制相鄰的上一個(gè)標(biāo)簽？
問(wèn)題描述
能百度到的有 >和+這樣的符號(hào)，分別控制子元素、下一個(gè)兄弟元素。
如
<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>
我想知道的是，有沒(méi)有更多這樣的符號(hào)？比如能實(shí)現(xiàn)選擇上一個(gè)兄弟元素？
問(wèn)題解答
回答1：只用css的話是不行的，css選擇器是向下選擇的，沒(méi)法向上選擇，你可以試下sass或者js實(shí)現(xiàn)；；；如果一定要通過(guò)css讓一個(gè)元素(a)控制另一個(gè)元素(b)，那只能讓b成為a的子元素或放到a后面
回答2：沒(méi)有直接的方案，但有另外幾個(gè)CSS3的偽類或許可以解決一些問(wèn)題。
p:first-of-type：指定父元素的首個(gè) 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/... 這個(gè)能給你很大幫助
回答問(wèn)題前先說(shuō)一個(gè)問(wèn)題，就是不要濫用 # ,在css中代表了id選擇器,由于id選擇器的權(quán)重過(guò)高,同級(jí)下不能存在相同的id（即使能通也不推薦相同id）,如果有需要多個(gè)相同的容器，希望可以選擇 . 類選擇器
先這個(gè)查找上一個(gè)兄弟元素的符號(hào)，在我印象里css里是沒(méi)有的。因?yàn)閏ss的寫法順序決定了結(jié)果，在#a后寫的內(nèi)容就算加選擇器，能選擇的也就只能事#a后方或者下方的元素了。
比較類似的符號(hào) ~ , #a:hover ~ .c 指的是#a后面所有的.c
畢竟css用不著太多復(fù)雜的邏輯，實(shí)在有需要的話拿js控制吧。
以上一點(diǎn)薄見(jiàn)回答4：可以說(shuō)是一個(gè)邏輯問(wèn)題……
選擇子元素或下一個(gè)兄弟元素，是以當(dāng)前元素為參照的。要選擇“上一個(gè)兄弟元素”，可以選擇以“上一個(gè)兄弟元素”為參照，給個(gè)class或id，那么相對(duì)地“當(dāng)前元素”就是“下一個(gè)兄弟元素”了。。。
可以用 + 和 > 實(shí)現(xiàn)的功能，不需要再定義多類似的偽類選擇器，記起來(lái)也易混淆。
網(wǎng)公網(wǎng)安備