html – 兄弟姐妹元素的CSS选择器

概述如果我有这个： <div class="parent"> <a href="#" id="trigger">Trigger</a></div><div class="sibling"> <div id="change">Hello</div></div> 当#trigger徘徊时,是否有选择器抓住#change？ 像#trigger的鼠标悬停一样,更改.sibling的#ch 如果我有这个：

<div >    <a href="#" ID="trigger">Trigger</a></div><div >    <div ID="change">Hello</div></div>

当#trigger徘徊时,是否有选择器抓住#change？

像#trigger的鼠标悬停一样,更改.sibling的#change元素的背景.

我正在寻找一个没有JavaScript的纯CSS解决方案.

解决方法 一句话：不.

给定您的HTML的当前结构(以及css选择器的当前状态),这是不可能的.也许我们会在CSS4中得到这样的东西,但是这样的遍历最好留给JavaScript.

您可以明显地重新组建标记,并使用兄弟选择器：

HTML

<div >    <a href="#" ID="trigger">Trigger</a>    <div >       <div ID="change">Hello</div>    </div></div>

CSS

#trigger:hover + .sibling #change {  color:red; }

codepen

总结

以上是内存溢出为你收集整理的html – 兄弟姐妹元素的CSS选择器全部内容，希望文章能够帮你解决html – 兄弟姐妹元素的CSS选择器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。