p > span 只选择第一层的span标签

p span 选择p后面所有的span标签

下面用ul li 和 ol li 演示

<ul>
    <li>
        <ol>
            <li></li>
        </ol>
    </li>
    <li>
        <ol>
            <li></li>
        </ol>
    </li>
    <li></li>
</ul>

ul>li

ul > li{ /*样式*/ }

这里的样式只会影响ul 下的 第一层 li ，也就是说 ol 标签下的 li不会受到这个样式的影响

ul li

ul  li{ /*样式*/ }

当你这样写的时候,影响的是所有在ul 里面的li标签的样式 。也就是包括ol 下的li标签的样式

<p>
    <span id=span1>
        <span id=span2><span/>
    </span>
<p>

以代码为例,p span 选中的是p标签下所有的span标签;p>span选中的是p标签下的#span1标签.

一个是后代选择器(子孙后代全选),一个是子选择器(只选择儿子,不选择孙子).

p>span 指的是第一代子span元素 

p span    指的是p的所有的子span元素    

p和span的权值相等，p大于span的权值，我是这么理解的

>作用于元素的第一代后代，空格作用于元素的所有后代。

p span是所有的p和所有的span标签，p>span是指p标签下的span标签