❤ 伪类和伪元素、:first-child和:first-of-type的区别

❤ 伪类和伪元素

一、使用

nth-child()选择器的使用

. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。

2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。

3. ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。

4. nth-child(an+b)：父元素的an+b个子元素，区分子元素类型。

5. first-child：父元素下的第一个子元素，如果第一个子元素不是该类型，选择不到。等同于：nth-child(1)。

6. last-child：父元素下的最后一个子元素，如果最后一个子元素不是该类型，选择不到。


nth-of-type()
例如
.bannerli:nth-of-type(1){}
//第一个bannerli这种元素
匹配属于父元素的特定类型的第n个子元素，忽略不是该类型的元素。

菜鸟教程

二、详细

1、伪类和伪元素对比

伪类（有元素之状态）	伪类 描述	伪元素（虚拟元素）	伪元素描述
定义	伪类用于选择DOM（html渲染来的文档树）之外的信息，或是不能用简单选择器进行表示的信息	–	伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。
例子	例如那些包含匹配指定状态的元素，比如:visited（访问），:active（元素激活）		包含那些满足一定逻辑条件的DOM树中的元素，比如::after（元素之后内容），::before（元素之前内容）

2、 伪类选择器和伪元素选择器包含哪些：

伪类选择器

• a:link{font-size:50px} a标签(超链接未被访问)
• a:visited{color：red} 链接被访问后
• a:active:{color：pink} 元素被激活
• a:hover{color：blue} 鼠标移入｜鼠标悬浮
• input：focus{color：red} 表单元素：获取焦点，键盘输入焦点元素
• :enable 每个已启动的元素
• :lang 选择带有指定 lang 属性
• :disable 选择每个已禁止的元素
• checked 选择每个被选中的元素
• :target 目标元素
• :root 根元素
• :read-write 选择没有"readonly"的表单元素
• :read-only 有"readonly"的表单元素
• :optional 选择为可选项的表单元素，即没有“required”属性
• :not(selector) 不满足selector的元素
• :valid 满足值为有效值的元素
• :invalid 满足值为无效值的元素
• :out-of-range 选择值不在指定范围内的元素
• :in-range 选择满足值在指定范围内的元素
• :empty 选择满足没有子元素的元素

伪元素选择器

• ::first-letter 选择指定元素的第一个元素
• p::first-letter{} 既要是p标签，又是其父元素的第一个子元素
• ::first-line 选择指定元素的第一行
• p::before 在内容之前添加内容
• ::before{content:“文本”} 在内容之前后添加内容
• :first-child 父元素的第一个子元素
• :first-of-type 其父元素的第一个某类型子元素
• ::last-of-type 选择满足是其父元素的最后一个某类型子元素的元素
• :nth-last-child(n) 父元素的倒数第n个子元素
• nth-child(n) 父元素的第n个子元素
• :last-child 父元素的最后一个元素
• :only-child 父元素的唯一一个子元素
• :nth-last-of-type(n) 父元素的倒数第n个某类型的元素
• :nth-of-type(n) 父元素的第n个某类型子元素的元素
• :only-of-type 父元素的唯一一个某类型子元素
• ::selection 选择指定元素中被用户选中的内容
• ::after 在指定元素的内容后面插入内容

内容一览：

3、伪类和伪元素区别及详解

根本区别：是否创造了新的元素，这个新创造的元素就叫 “伪元素” 。
可以同时使用多个伪类，而只能同时使用一个伪元素；

本质不同：

伪类：为了弥补常规CSS选择器的不足，以便获取到更多信息
伪元素：创建了一个有内容的虚拟容器

语法不同：

伪类：CSS3中伪类 :link :hover
伪元素：CSS3中伪元素 ::before ::after

伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。 这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器(标签

4、格外注意：

在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

注意：

1. 伪对象要配合content属性一起使用
2. 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3. 伪对象的特效通常要使用:hover伪类样式来激活

5、进一步细化

:after/::after和:before/::before的异同
相同点
都可以用来表示伪类对象，用来设置对象前的内容，
:before和::before写法是等效的; :after和::after写法是等效的

不同点
:before/:after是Css2的写法，::before/::after是Css3的写法
所以css2的要比css3的兼容好，:before/:after 的兼容性要比::before/::after好，
不过在H5开发中建议使用::before/::after比较好