扫码关注官方订阅号
能百度到的有 >和+这样的符号,分别控制子元素、下一个兄弟元素。
如
元素1 元素2 元素3 元素2
元素1
元素2
元素3
我想知道的是,有没有更多这样的符号?比如能实现选择上一个兄弟元素?
欢迎选择我的课程,让我们一起见证您的进步~~
只用css的话是不行的,css选择器是向下选择的,没法向上选择,你可以试下sass或者js实现;;;如果一定要通过css让一个元素(a)控制另一个元素(b),那只能让b成为a的子元素或放到a后面
没有直接的方案,但有另外几个CSS3的伪类或许可以解决一些问题。
p:first-of-type:指定父元素的首个 p 元素的背景色
p:first-of-type
#a~#c:hover:c元素上面必须有a。
#a~#c:hover
感受一下:
.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>
http://www.runoob.com/cssref/... 这个能给你很大帮助
回答问题前先说一个问题,就是不要滥用 # ,在css中代表了id选择器,由于id选择器的权重过高,同级下不能存在相同的id(即使能通也不推荐相同id),如果有需要多个相同的容器,希望可以选择 . 类选择器 先这个查找上一个兄弟元素的符号,在我印象里css里是没有的。因为css的写法顺序决定了结果,在#a后写的内容就算加选择器,能选择的也就只能事#a后方或者下方的元素了。 比较类似的符号 ~ , #a:hover ~ .c 指的是#a后面所有的.c 毕竟css用不着太多复杂的逻辑,实在有需要的话拿js控制吧。 以上一点薄见
回答问题前先说一个问题,就是不要滥用 # ,在css中代表了id选择器,由于id选择器的权重过高,同级下不能存在相同的id(即使能通也不推荐相同id),如果有需要多个相同的容器,希望可以选择 . 类选择器
#
css
id
.
先这个查找上一个兄弟元素的符号,在我印象里css里是没有的。因为css的写法顺序决定了结果,在#a后写的内容就算加选择器,能选择的也就只能事#a后方或者下方的元素了。
#a
比较类似的符号 ~ , #a:hover ~ .c 指的是#a后面所有的.c
~
.c
毕竟css用不着太多复杂的逻辑,实在有需要的话拿js控制吧。
可以说是一个逻辑问题……
选择子元素或下一个兄弟元素,是以当前元素为参照的。要选择“上一个兄弟元素”,可以选择以“上一个兄弟元素”为参照,给个class或id,那么相对地“当前元素”就是“下一个兄弟元素”了。。。
可以用 + 和 > 实现的功能,不需要再定义多类似的伪类选择器,记起来也易混淆。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
只用css的话是不行的,css选择器是向下选择的,没法向上选择,你可以试下sass或者js实现;;;
如果一定要通过css让一个元素(a)控制另一个元素(b),那只能让b成为a的子元素或放到a后面
没有直接的方案,但有另外几个CSS3的伪类或许可以解决一些问题。
p:first-of-type:指定父元素的首个 p 元素的背景色#a~#c:hover:c元素上面必须有a。感受一下:
谢邀
http://www.runoob.com/cssref/... 这个能给你很大帮助
可以说是一个逻辑问题……
选择子元素或下一个兄弟元素,是以当前元素为参照的。要选择“上一个兄弟元素”,可以选择以“上一个兄弟元素”为参照,给个class或id,那么相对地“当前元素”就是“下一个兄弟元素”了。。。
可以用 + 和 > 实现的功能,不需要再定义多类似的伪类选择器,记起来也易混淆。