文章詳情頁(yè)

css3 - CSS偽類(lèi)選擇器，如何選擇并控制相鄰的上一個(gè)標(biāo)簽？

瀏覽：124日期：2023-06-24 15:54:50

問(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>元素1 元素2元素3 元素2</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的偽類(lèi)或許可以解決一些問(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;}

回答3：謝邀

http://www.runoob.com/cssref/... 這個(gè)能給你很大幫助

回答問(wèn)題前先說(shuō)一個(gè)問(wèn)題，就是不要濫用 # ,在css中代表了id選擇器,由于id選擇器的權(quán)重過(guò)高,同級(jí)下不能存在相同的id（即使能通也不推薦相同id）,如果有需要多個(gè)相同的容器，希望可以選擇 . 類(lèi)選擇器

先這個(gè)查找上一個(gè)兄弟元素的符號(hào)，在我印象里css里是沒(méi)有的。因?yàn)閏ss的寫(xiě)法順序決定了結(jié)果，在#a后寫(xiě)的內(nèi)容就算加選擇器，能選擇的也就只能事#a后方或者下方的元素了。

比較類(lèi)似的符號(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)似的偽類(lèi)選擇器，記起來(lái)也易混淆。