CSS3-层次选择器语法（实战）
2014-11-09 19:54
369 查看
直接上实战源码：
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3-基本选择器语法（实战）
- CSS-基本语法/引用/文本设置/选择器/css3属性
- CSS3选择器——2、层次选择器
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第5章 CSS3：选择器、字体和颜色模式
- CSS3实战之新增的选择器
- CSS3实战之新增的选择器
- HTML5系列文章【2】 CSS3概述、语法、各种选择器
- css3选择器--层次选择器
- CSS3层次选择器
- 《CSS3 实战》 笔记 新增的选择器
- css3选择器--基本选择器，层次选择器，属性选择器
- CSS3 层次选择器
- CSS3实战之新增的选择器
- 图解CSS3核心技术与案例实战（第二章 CSS3选择器）
- jQuery学习（二）语法 选择器
- jQuery之层次选择器
- 【笔记】web响应式设计：HTML5和CSS3实战 第一章~第三章
- jquery基础教程 选择器(selectors 的xpath语法应用)
- android中Manifest文件的语法层次
- CSS3 ::selection选择器