css 兄弟选择器简单代码实例
分类：实例代码
关于兄弟选择器的更多内容可以参阅CSS (E~F)兄弟选择符一章节。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0px;
padding:0px;
}
div{
width:200px;
height:50px;
background:#ccc;
margin:10px;
}
#test~div{
background:red;
}
</style>
</head>
<body>
<div></div>
<div id="test"></div>
<div></div>
</body>
</html>
上面的代码可以将test元素后面的兄弟元素背景颜色设置为红色。
特别说明:必须是匹配元素后面的兄弟元素，对前面的兄弟元素不起作用。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu