CSS中容易混淆的伪元素类型和用法

:first-of-type

 匹配属于其父元素的第一个特定类型的子元素。

1.例子

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        p:first-of-type {  
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <h1>h1文本</h1>
        <p>p文本</p>
    </div>
</body>

匹配父元素div的第一个 p 标签的子元素

2.first-of-type 和 first-type的区别

first-type:父元素的第一个子元素
first-of-type：其父元素的第一个特定类型的子元素。

    <style>
        p:last-of-type {
            color: red;
        }

        h1:last-of-type {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <h1>h1文本</h1>
        <p>p文本</p>
        <h1>h1文本</h1>
        <p>p文本</p>
        <h1>h1文本</h1>
        <p>p文本</p>
        <h1>最后一个H</h1>
        <p>ppppppppp</p>
    </div>
</body>

执行效果：

![屏幕快照 2018-03-21 下午9.09.47-w275](http://ozfuwp2os.bkt.clouddn.com/屏幕快照 2018-03-21 下午9.09.47.png)

::first-line

匹配元素中第一行的文本(只能在块元素中使用)。

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /* 匹配元素中文本的首字母。 */
        p::first-letter {
            font-size: 32px;
        }

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

<body>
    <div>
        <p>!!!ppppppppp</p>
    </div>
</body>

执行效果：

![屏幕快照 2018-03-21 下午9.29.13-w176](http://ozfuwp2os.bkt.clouddn.com/屏幕快照 2018-03-21 下午9.29.13.png)

温故而知新：常见块级元素

◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - h6 各级标题
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）

之所以在这里放上块级元素的回顾，是因为我英语学得比较好，想把好的学习方法迁移到前端学习中来。学习方法是多次重复，有效巩固。css的知识点复杂繁琐，遇到一次记一次，加深印象！

共同进步吧！