直接上实战源码：
<!DOCTYPE HEML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{width: 300px; margin: 0 auto;}
div{margin: 5px; padding: 5px; border: 1px solid #ccc;}
div div{background: orange;} /* 后代选择器 */
body > div{background: green;} /* 字选择器 */
.active + div{background: lime;} /* 相邻兄弟选择器 */
.active ~ div{background: red;} /* 通用兄弟选择器 */
</style>
</head>
<body>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
原创文章 27
获赞 18
访问量 3万+