❤ 伪类和伪元素
一、使用
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中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。
注意:
- 伪对象要配合content属性一起使用
- 伪对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
- 伪对象的特效通常要使用: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比较好