CSS伪类选择器,如何选择并控制相邻的上一个标签?

Ivar
  • 65

能百度到的有 >和+这样的符号,分别控制子元素、下一个兄弟元素。

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>


我想知道的是,有没有更多这样的符号?比如能实现选择上一个兄弟元素?

回复
阅读 19.9k
5 个回答
cipchk
  • 6.6k

没有直接的方案,但有另外几个CSS3的伪类或许可以解决一些问题。

p:first-of-type:指定父元素的首个 p 元素的背景色

#a~#c:hover:c元素上面必须有a。

感受一下:

.start {
  display: flex;
}
.start > div {
  height: 30px;
  width: 30px;
  margin-right: 4px;
  border: 1px solid #999;
  cursor: pointer;
}
.start:hover > div {
  border-color: #f50;
}
.start > div:hover,
.start > :hover ~ div {
  border-color: #999;
}
<div class="start">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

只用css的话是不行的,css选择器是向下选择的,没法向上选择,你可以试下sass或者js实现;;;
如果一定要通过css让一个元素(a)控制另一个元素(b),那只能让b成为a的子元素或放到a后面

谢邀

http://www.runoob.com/cssref/... 这个能给你很大帮助

回答问题前先说一个问题,就是不要滥用 # ,在css中代表了id选择器,由于id选择器的权重过高,同级下不能存在相同的id(即使能通也不推荐相同id),如果有需要多个相同的容器,希望可以选择 . 类选择器

先这个查找上一个兄弟元素的符号,在我印象里css里是没有的。因为css的写法顺序决定了结果,在#a后写的内容就算加选择器,能选择的也就只能事#a后方或者下方的元素了。

比较类似的符号 ~ , #a:hover ~ .c 指的是#a后面所有的.c

毕竟css用不着太多复杂的逻辑,实在有需要的话拿js控制吧。

以上一点薄见

可以说是一个逻辑问题……

选择子元素或下一个兄弟元素,是以当前元素为参照的。要选择“上一个兄弟元素”,可以选择以“上一个兄弟元素”为参照,给个class或id,那么相对地“当前元素”就是“下一个兄弟元素”了。。。

可以用 + 和 > 实现的功能,不需要再定义多类似的伪类选择器,记起来也易混淆。

之前W3C好像说过会引起什么回溯问题,你这种想法其实可以使用现有CSS3方案解决,就是写起来代码可能会有点难看。
比如我希望<label><input>获取焦点时变色。
Change label color when input:focus

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏