div p、div＞p、div+p、div~p、div.a 、p,span的用法和区别

一、div p

将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）。

//例子中所有的span都为红色
<style> 
  div span{color:red;}
</style>

<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>

二、div>p

将所有<div>标签的子标签<p>选中，不包括孙子辈标签。

//这个例子中只有Study Css是红色。
<style> 
   div>span{color:red;}
</style>

<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>

三、div+p

将所有离<div>相邻的<p>标签选中

//这个例子中world字体是蓝色。
<style>
    div + p{color: blue;}     /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
</style>

<div>hello</div>
<p>world</p>

四、div~p

将<div>后面所有的<p>标签选中

//这个例子中所有p标签字体都是橙色。
<style>
    div~p{color: orange;}
</style>

<div>第一段</div>
<p>p标签</p>
<p>p标签</p>

五、div.a

将<div>下class=a标签选中

//这个例子中hello world字体是绿色。
<style>
    div.a{color: green}
</style>

<div class="a">hello world</div>

div .content ：将选中div下class=content 标签
div span.username:表示选中div下class为username的span

六、p,span

将p和span选中

//这个例子中p和span字体是绿色！
<style>
    p,span{color: green}
</style>
<p>驾驶、行驶</p>
<span>记分查询</span>