<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin: 0;padding: 0}
body{width: 300px;margin: 0 auto}
div{margin:5px;padding: 5px;border: 1px solid #cccccc}
/*后代选择器 E F 5,6,8,9,10是后代*/
div div{background: orange}
/*子选择器 E>F:body下面的子div*/
body > div{background: green}
/*相邻兄弟选择器E+F:具有相同的父元素*/
.active+div{background: lime}
/*css3新增加的通用兄弟元素选择器:E~F:用于选择某元素后面所有的兄弟元素*/
.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>
<html>
<head>
<title></title>
<style>
*{margin: 0;padding: 0}
body{width: 300px;margin: 0 auto}
div{margin:5px;padding: 5px;border: 1px solid #cccccc}
/*后代选择器 E F 5,6,8,9,10是后代*/
div div{background: orange}
/*子选择器 E>F:body下面的子div*/
body > div{background: green}
/*相邻兄弟选择器E+F:具有相同的父元素*/
.active+div{background: lime}
/*css3新增加的通用兄弟元素选择器:E~F:用于选择某元素后面所有的兄弟元素*/
.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>
7061

被折叠的 条评论
为什么被折叠?



