css 选择器 如何选择前一节点?

发布于 2022-09-07 20:17:43 字数 988 浏览 20 评论 0

问题1:组合类选择器都是选择后面的节点,如何选择前面的?

<p>
    <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>

    <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a>
</p>
.p1:hover+.p2 {
                outline: 10px double purple;
            }
            
.p2:hover~.p1 {
                outline: 10px double purple;
            }

其实想做就是:鼠标悬停p1,给p2一个框; 鼠标悬停p2,给p1一个框。 但,后半句无效。
组合选择器都试了,它们全是向后选择节点的,没法向前。。。?

问题2:如何选择不同父的两个/多个元素?
还是上例,我开始的HTML是这样写的

<div>    
    <p>
        <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>
    </p>

    <p>
        <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a>
    </p>
</div>

后来发现,组合选择都是兄弟 后代,像上面分属于两个<p>的,貌似没啥关系,怎样实现我问题1的目的?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

将军与妓 2022-09-14 20:17:43

可以使用jQuery的选择器,用js代码去实现;
给P下的a标签增加mouseover事件,在里面切换class
如 增加一个active类,默认赋给某一个a标签

.active{border:1px solid #ccc}
$('p a').mouseover(function(e){
    $('p a').toggleClass('active'); 
})
凉城已无爱 2022-09-14 20:17:43

p:nth-child(1) p:nth-child(2) p:first-child p:last-child

顾铮苏瑾 2022-09-14 20:17:43

css 并没有提供前置选择器, 后面的去设置前面的元素将可能会引发重排

所以使用 js 吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文