直接子代选择器

例如 p > .title将会选中p元素下第一代有title class的子元素

<p>
<div class='title'></div>
<div class='content'>
        <div class='title'></div>
</div>
</p>

则
第一个title将会被选中，因为他是p的第一级子元素（直接子元素）
第二个title不会被选中，因为他是p的第二级子元素（非直接子元素）

非直接子代选择器 空格

例如 p .title

上面的例子中，两个title都会被选中，因为他们都是p的子元素，不管是直接的还是非直接的子元素，都会被选中。

使用方式为：选择器:描述。伪类选择器实现了逻辑描述类型的选择器，而不是静态的选择器。符合伪类中的逻辑描述的元素将被选中。

a:hover     表示选择鼠标hover时的a元素
:root   表示选择文档的根元素
p:first-child   表示选择p的第一个子元素

以上选择器中，冒号后的单词都是一个逻辑描述，即：被hover的；根的；第一个子元素。符合这些描述的元素将被选中。

常用的伪类选择器

:link   选择所有未被访问的链接。
:visited    选择所有已经被访问过的链接。
:hover  选择鼠标指针浮动在其上的元素。
:active 选择活动状态的元素。
:focus  选择得到焦点的元素。
:first-child    选择元素的第一个子元素。
:last-child 选择元素的最后一个子元素。
**:nth-child(n)**   选择元素的第n个子元素。
:root   选择文档的根元素 使用:root选择器可以方便地为整个文档设置全局的CSS变量，如下：