css选择器基本类型
<!DOCTYPE html>
<html lang="en">
<!--css选择器基本类型-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*后代选择器描述的是一种祖先结构*/
/*标签选择器,id选择器,类选择器,后代选择器*/
.div1 .li2 p{
color: red;
}
div .div2 div p{
color: green;
}
/*交集选择器 (交集选择器没有空格,后代选择器有空格)*/
/*交集选择器可以连续交,一般都以标签开头,从IE7开始兼容*/
/*XP安装的是IE6
Win7安装的IE8*/
h3.special{
color: blue;
}
h3.special.zhongyao{
color: blue;
}
/*并集选择器*/
h3,li{
color: red;
}
</style>
</head>
<body>
<div class="div0">
<!--类选择器-->
<ul>
<li>
<p>郑州</p>
<p>郑州</p>
<p>郑州</p>
</li>
<li class="li2">
<p>郑州</p>
<p>郑州</p>
<p>郑州</p>
</li>
<li>
<p>郑州</p>
<p>郑州</p>
<p>郑州</p>
</li>
</ul>
</div>
<!--后代选择器-->
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>我的颜色</p>
</div>
</div>
</div>
</div>
<!--交集选择器-->
<div>
<h3>我是标题</h3>
<h3 class="special zhongyao">我是标题</h3>
<h3 class="special">我是标题</h3>
<h3 class="special">我是标题</h3>
<p>我是段落</p>
<p>我是段落</p>
</div>
<!--并集选择器-->
<h3>我是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>我是一个列表</li>
</ul>
</body>
</html>