1.层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 div{background:red;}/*obj.getElementsByTagName*/
</style>
</head>
<body>
<div id="div1">
<div>div1 div</div>
<ul>
<li></li>
<li></li>
<li>
<div>div1 div</div>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li>
<div>div1 div</div>
</li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
2.子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 > div{background:red;}/* 一级子元素*/
</style>
</head>
<body>
<div id="div1">
<div>div1 div</div>
<ul>
<li></li>
<li></li>
<li>
<div>div1 div</div>
</li>
<li></li>
<li></li>
</ul>
<div>div1 div</div>
<ol>
<li></li>
<li></li>
<li>
<div>div1 div</div>
</li>
<li></li>
<li></li>
</ol>
<div>div1 div</div>
</div>
</body>
</html>
3.下一个兄弟节点选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active + li{background:red;} /*=>obj.nextSiblings*/
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li class="active">active</li>
<li></li>
<li></li>
</ul>
</body>
</html>
4.元素以后所有节点选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active ~ li{background:red;} /*obj.nextAll(); 元素之后所有节点选择器*/
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li class="active">active</li>
<li></li>
<li></li>
</ul>
</body>
</html>
