CSS3 相邻兄弟选择器 hover

最新推荐文章于 2024-05-11 01:50:08 发布

weixin_33962923

最新推荐文章于 2024-05-11 01:50:08 发布

阅读量1.8k

点赞数

原文链接：https://juejin.im/post/5c7de432e51d4502560f515c

版权

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

<style type="text/css">
h1 + p {margin-top:50px;}
</style>复制代码

相邻兄弟选择器用 + 号连接
父级元素指向子集元素用>复制代码

<style>
    .father{
        color: yellow;    
}
    .father:hover>.son{
        color: red;
    }
    .father:hover+.fatherB{
        color: blue;
    }    
.father:hover+.fatherB>.sonB{
        color: green;
    }
</style>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <div class="fatherB">父亲
        <div class="sonB">儿子</div>
    </div>
</body>复制代码

转载于:https://juejin.im/post/5c7de432e51d4502560f515c

weixin_33962923

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 相邻兄弟选择器 hover

<h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><style type="text/css">h1 + p {margin-top:50px;}</style>复制代码相邻兄弟选择器用 ...
复制链接

扫一扫