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，那么相对地“当前元素”就是“下一个兄弟元素”了。。。
可以用 + 和 > 实现的功能，不需要再定义多类似的伪类选择器，记起来也易混淆。
网公网安备