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="http://www.mamicode.com/#">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>

选择符