CSS中hover改变子元素和其它元素样式

最新推荐文章于 2025-10-08 11:04:02 发布

原创最新推荐文章于 2025-10-08 11:04:02 发布 · 3.9w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#web #css #html #前端 #hover

html 专栏收录该内容

27 篇文章

订阅专栏

本文通过一个简单的HTML示例介绍了CSS中不同选择器的应用方式，包括基本的选择器如ID选择器，以及更复杂的选择器组合使用，例如相邻兄弟选择器和子元素选择器等。

+表示下一级元素，>表示子元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    #a {color : #FFFF00;}

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

</div>
<div id='c'>元素3
    <div id='b'>元素2</div>
</div>


</html>