HTML代码：
<div id="div1"></div>
<div id="div2"></div> id:是唯一的，一个html中只能存在一个，不能有两个id相等的标签，并且一个id只能有一个值。
<div class="div"></div>
<div id="divId" class="div"></div> id class：他们可以同时存在于一个标签。此标签会具有两者的所有css属性(此处先不谈优先级问题)。
<div class="div1 div2"></div> class：它是一组属性，可以允许多个标签同时使用同一个class，并且一个标签也可以同时使用多个class值。当拥有两个或者两个以上class值时，它也会同时具有这些class所对应的css属性(此处先不谈优先级问题)。
<p>p1</p>
<p>p2</p>
<div>
<p>div-p</p>
<p>div-p</p>
<a href="#">div-a</a>
<p>
<span>div-p-span</span>
</p>
</div>
CSS代码：
<style>
#div1{width：100px；height:100px;} #:表示id选择符，即#div1中#表示用id选择，div1为id值。
#div1,#div2{border:1px solid red;} #div1,#div2：表示为群组选择符，这些标签的样式是相同的。
.div{background:red;} .：类选择符，即.div中.表示用class选择，div为class的值。
.div1{margin:10px;}
.div2{padding:10px;}
.divId{padding:10px;}
p{text-align:center;} p:此处p不仅仅代表p标签，可以为所有标签，可以为div、a、img…，此选择方式为类型选择符，即此html中所有的p或者div、a…都有同样的样式。
div p{color:blue;} div p:包含选择符，即表示在div内的所有的p标签拥有的相同的css样式。
div span{color:green;} div span:在html中span是在div下的p下的，但是我们在这里是可以这样写的。当然也恶意写为：div p span{color:green;}。这两个的选择取决于准确性和便捷性。
*{border:1px solid grey;} *:通配符，即给所有的html标签加样式。
</style>