首页 » 前端笔记 » 正文

CSS伪类hover子元素和其他元素选择

2018年07月05日 23:45:36

这个功能比较方便,+代表下一级 ,即使B,C更换位置也还是改变下一级,>改变子元素,~选择所有元素。菜鸟一枚学习了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #a {color : #FFFF00;}
    #a:hover + #c{color : #00FF00;} /*“+”代表下一级元素*/
    #a:hover + #c > #b{color : #0000FF;} /*“>”代表子元素*/
    /*#a:hover~div{color : #00FF00;}*/ /*~所有div元素样式*/
    #a:hover~div{color : #00FF00;}
    
</style>
</head>
<body>   
    <div id='a'>元素1</div>
    <div id='c'>元素3
    <div id='b'>元素2
    </div>
</div>
</body>
</html>

  • 评论(0)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。