什么是伪元素？
伪元素是创造关于文档语言能够指定的文档树之外的抽象。
例如文档语言不能提供访问元素内容第一字或者第一行的机制。
伪元素允许设计师引用它们，否则这是难以办到的。
伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：::before和::after能够访问产生的内容）。
伪元素有：
1
2
3
4
5
| ::first-line
::first-letter
::before
::after
::selection
|
::first-line
::first-line选择器用于选取指定元素文档的首行（第一行）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
div::first-line{
color: red;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
这个是修改文字颜色 只有第一行的文字颜色变为红色 其他文字颜色还是默认黑色
执行效果为
再改下背景颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
div::first-line{
color: red;
background-color: #000;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
执行效果为 同样只有第一行的背景颜色改变了
如上所示 ::first-line 这个属性只作用于该文档的第一行文字
同样除了上面演示的几种属性还有
- 字体属性
- 颜色属性
- 背景属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter
::first-letter 属性只作用于元素的首个字母或文字
还是上面的代码
1
2
3
4
| div::first-letter{
color: red;
background-color: #000;
}
|
只是改成first-letter
效果如下
如图所示 只有第一个文字样式被改变了
同样 还可以改变：
- 字体属性
- 颜色属性
- 背景属性
- 外边距属性
- 内边距属性
- 边框属性
- text-decoration
- vertical-align（只有在 float 为 ‘none’ 时）
- text-transform
- line-height
- float
- clear
::before
::before 在元素内容之前插入新的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: deepskyblue;
}
div::before{
content: '';
width: 100px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
效果如图
在DVI的前面多了一个红色方框 上边第二张图片是浏览器控制台的状态 在文档之前多了一个::before
::after
::after 与::before 相反 他是在元素的后面添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: deepskyblue;
}
div::after{
content: '';
width: 100px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
效果如图
在DVI的后面多了一个红色方框 上边第二张图片是浏览器控制台的状态 在文档后面多了一个::after
::selection
::selection 设置文本选中状态
不过只能设置两个属性
执行下面代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
效果为
这是默认效果
添加属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-line</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
div::selection{
color: #fff;
background:deepskyblue;
}
</style>
</head>
<body>
<div>符合身份和集散地该U盾傻瓜ID搜我爱护公大赛后宫ID撒谎个欧ID搜爱国我海带丝欧安哥嫂该活动四阿哥好</div>
</body>
</html>
|
效果为：
选中文字颜色和背景变成我设置的颜色了
大家可以自己复制上面代码 有编辑器的保存到编辑器
没有编辑器的可以在文本中粘贴 然后另存为 index.html 注意扩展名 不要选默认的txt