: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的知识点复杂繁琐，遇到一次记一次，加深印象！

共同进步吧！

CSS中容易混淆的伪元素类型和用法的更多相关文章

  1. 知方可补不足～CSS中的几个伪元素

    对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...

  2. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  3. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  4. 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  5. CSS中before、after伪类选择器的巧用

    大家好,今天给大家带来使用css中 before . after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么 选择器 作用 before 向选定的元素前插入 ...

  6. CSS（二）- 选择器 - 伪元素和伪类（思维导图）

    伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...

  7. css中各种情况下的元素的垂直和水平居中的问题

    问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...

  8. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  9. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

随机推荐

  1. 引用第三方dll引发的问题解决

    引用的程序集错误  如果引用第三方dll,调试出现引用的程序集出现错误,可以下载dependency,查看这个dll的依赖dll,如果本地电脑没有依赖dll或依赖dll出现问题,则下载或取代依赖dll ...

  2. Online Judge（OJ）搭建——3、MVC架构

    Model Model 层主要包含数据的类,这些数据一般是现实中的实体,所以,Model 层中类的定义常常和数据库 DDL 中的 create 语句类似. 通常数据库的表和类是一对一的关系,但是有的时 ...

  3. JavaScript -- 知识点汇总

    js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: v ...

  4. WinSock 异步I/O模型

    如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是选择(select)模型,异步选择(WSAAsyncSelect)模型, ...

  5. Acer Aspire E1 471G 加装SSD+机械盘后无法启动的问题

    老笔记本 Acer Aspire E1 471G 加装了一块 SSD 作为系统盘(win10),原机械盘格式化后,装在光驱托架上作为数据盘. 可能会出现: 系统无法启动,显示找不到启动设备,并且在F2 ...

  6. Spring中Bean的生命周期讨论

    1.代码和配置文件准备 1.1.测试类(user.java) public class User { private int id; private String name; private int ...

  7. 在idea的maven相关配置

    1.下载maven   下载地址:点击 2.设置maven 打开maven目录下settings.xml 设置阿里中心仓库 <mirror>    <id>alimaven&l ...

  8. [css 实践篇] 解决悬浮的<header> <footer>遮挡内容的处理技巧

    我写的实践篇 都是自己在实践项目所遇到的 "拦路虎" 还是很有借鉴的意义的.(实践才是检验真理的唯一标准呀),废话不多说,进去正题 position: fixed 绝对固定底部后会 ...

  9. React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（一）

    近期终于把之前留下的坑填上了(说了好久的要网站重写,总算是写完了),不过最后的在线添加文章,功能虽然做了,后台没把接口加上,实在是没精力去折腾了,公司又有事要忙,现在把从0开始到完成的一个思路来写一下 ...

  10. vue 源码学习----build/config.js

    1. process 这个process是什么?为何都没有引入就可以使用了呢? process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对 ...