CSS伪元素选择器

1.first-line　　选择文本的首行　　无视嵌套标签

比如：

<div>
    111111
</div>
<div>
    <p>111111</>
</div>


<style>
    div:first-line{
        color:red;
    }
</style>

以上两个文本内容的颜色都会变成红色。

2.first-letter　　选择文本的首字母     无视嵌套标签

3.::selection   选择被用户选中的部分或者处于高亮状态的部分   不无视嵌套标签

举个例子：下面的例子中，只有aaaaa选中是才会变成我们定义的颜色。

<div>
    aaaaa
    <p>abc你和我 曾经有共同爱好</p>
</div>

<style>
　　　　　div::selection{
            height: 100px;
            background: burlywood;
        }
</style>

4.  :root　　　　根元素，相当于html

5.  :empty　　　　元素为空

6.  :only-child　　　　它的父元素只有它这么一个儿子。

举个例子：结果就是，p标签会被加上标签。

    <style>
        p:only-child{
            width: 100px;
            height: 50px;
            border: 1px solid blue;
        }
    </style>

<div>
    aaaaa
    <p>abc你和我 曾经有共同爱好</p>
</div>

7.   ：first-of-type   选择第一个指定类型的子元素        

比如6中的例子也可以这样写css。也就是选择p的父元素中的第一个p元素。

p:first-of-type{
            width: 100px;
            height: 50px;
            border: 1px solid blue;
        }

8.   ：last-of-type　　　　　　选择最后一个指定类型的子元素

9.  ：nth-of-type（n）　　　　　　选择特定类型的子元素  　　　　n可以是数字、关键字、公式

10.  ：nth-last-of-type()　　　　选择列表末尾中指定类型的子元素    和9相反，可以理解为倒着选择