<div id="div" class="div">

      <p class="div_P1"></p>

      <span></span>

 </div>

.div>sapn{   //选中.div全部的子代span

    color:red;

}

.div sapn{   //选中.div全部的后代span

    color:red;

}

.div>span,.div>.div_p1{   //选中.div全部的子代span和.div_p1

    color:red;

}

p+sapn{   //选中p后面的每个span

    color:red;

}

span:hover    //这是a标签常用的属性，在这里不多说

{

color:red;

 } 
span:after //在span标签后增加haha字 

{ content:"haha"; } 
span:before //在span标签前增加haha字 

{ content:"haha"; } 
.div span:nth-child(1) //这里表示选中的是div下面的第一个子元素,括号里面的也可以表示奇数或者偶数 {

      color:red;

 } 
.div span:nth-type-of(1) //这里表示选中的是div下面同类型（所有span就是同类型的）的第一个子元素,括号里面的也可以表示奇数或者偶数 {

       color:red;

 } 
.div:not(.div_P1){ //在div下除.div_P1的元素 color:red; }