HTML伪类选择器after,CSS3中的结构伪元素选择器和伪类选择器的使用

伪元素选择器属性介绍

•伪元素主要作用就是操作元素的文本和添加内容

•伪元素使用说明表

属性

描述

X:first-letter

设置X元素中的第一个字。

X:first-line

设置X元素中的第一行字

X::before

在X元素最前面添加内容。

X::after

在X元素最后面添加内容。

first-letter实践：

•使用first-letter属性设置div文本第一个字颜色为红色。

伪元素选择器

color: red;

}

从你的全世界路过

效果图：

first-line实践：

•使用first-line属性设置div标签的文本第一行字颜色为红色。

伪元素选择器

color: red;

}

从你的全世界路过
从你的全世界路过
从你的全世界路过

效果图：

before实践

• 使用before属性设置div标签的文本前面添加“牛奶咖啡”2个字。

伪元素选择器

content:"牛奶咖啡：";

}

从你的全世界路过

效果图：

after实践

•使用after属性设置div标签的文本最后面添加“牛奶咖啡”2个字。

伪元素选择器

content:"牛奶咖啡：";

}

从你的全世界路过

效果图：

结构伪类选择器介绍

• 结构伪类选择器是用来处理一些特殊的效果。

•结构伪类选择器属性说明表

属性

描述

X:first-child

匹配X元素的第一个子元素

X:last-child

匹配X元素的最后一个子元素。

X:nth-child(n)

匹配X元素的第n个子元素

X:nth-child(2n)或者x:nth-child(even)

匹配X元素的偶数子元素。

X:nth-child(2n+1)或者x:nth-child(odd)

匹配X元素的奇数子元素。

X:only-child

匹配X元素中仅有一个的子元素。

first-child实践:

•使用first-child属性设置div第一个标签文本颜色为蓝色

伪元素选择器

div{

width:200px;

height:30px;

background:red;

text-align:center

}

div:first-child {

color:blue

}

从你的全世界路过

从你的全世界路过

从你的全世界路过

效果图：

last-child实践：

•使用last-child属性设置div最后一个标签文本颜色为蓝色

伪元素选择器

div{

width:200px;

height:30px;

background:red;

text-align:center

}

div:last-child {

color: blue

}

从你的全世界路过

从你的全世界路过

从你的全世界路过

效果图：

nth-child实践

•使用nth-child(n)属性设置div标签中的第四个lable标签文本颜色为蓝色。

伪元素选择器

div {

width: 146px;

height: 100px;

background: red;

text-align: center

}

div label:nth-child(4) {

color: blue;

}

从你的全世界路过

从你的全世界路过

从你的全世界路过

从你的全世界路过

效果图：

nth-child(2n)实践：

•使用nth-child(2n)属性设置div标签中的偶数标签文本颜色为蓝色。

伪元素选择器

div {

width: 146px;

height: 100px;

background: red;

text-align: center

}

div label:nth-child(2n) {

color: blue;

}

从你的全世界路过

从你的全世界路过

从你的全世界路过

从你的全世界路过

效果图：

•使用nth-child(2n+1)属性设置ul标签中的奇数li标签文本颜色为红色

伪元素选择器

div {

width: 146px;

height: 100px;

background: red;

text-align: center

}

div label:nth-child(2n+1) {

color: blue;

}

从你的全世界路过

从你的全世界路过

从你的全世界路过

从你的全世界路过

效果图：

only-child实践：

•使用only-child属性设置ul标签中的仅有一个li标签文本颜色为红色。

伪元素选择器

ul li:only-child {

color: red;

}

• 1
• 2
• 3
• 4
• 5
• 6

• 就我一个li标签

效果图：