div p、div>p、div+p、div~p、div.a 的用法和区别

div p ：将所有标签里面的

标签选中（子标签和孙子辈标签）

    div span{color:red;}

        Hello World!  

上面的例子中所有的span都为红色

div>p ：将所有标签的子标签

选中，不包括孙子辈标签。

    div>span{color:red;}

       Hello World!  

这个例子中只有Study Css是红色！

div+p ：将所有离相邻的

标签选中 

  div + p{color: blue;}/*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/

hello

world

这个例子中world字体是蓝色！

div~p ：将后面所有的

标签选中

  div~p{color: orange;}

第一段

p标签

p标签

这个例子中所有p标签字体都是橙色！

div.a ：将下class=a标签选中

  div.a{color: green}

hello world

这个例子中hello world字体是绿色！

p,span ：将p和span选中

  p,span{color: green}

驾驶、行驶

这个例子中p和span字体是绿色！