1、伪类和伪元素
css3为了区分伪类和伪元素,伪元素采用双冒号写法。
1.1、伪类
- :hover
- :link
- :active
- :target
- :not()
- :focus
1.2、伪元素
- ::first-letter
- ::first-line
- ::before
- ::after
- ::selection
::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素::before和::after示例</title>
<style type="text/css">
.phone_number::before{
content:'\260E';
font-size: 15px;
}
.phone_number::after{
content:'\25BA';
font-size: 20px;
}
</style>
</head>
<body>
<p class="phone_number">13697555555</p>
</body>
</html>
注意:这些特殊字符的html,js和css的写法是不同的,具体可查看html特殊字符的html,js,css写法汇总。
2、content 属性
::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。
默认情况下,伪类元素的 display
是默认值 inline
,可以通过设置 display:block
来改变其显示。
以下是content属性可取的值:
- string 使用引号包一段字符串,将会向元素内容中添加字符串
- attr() 通过attr()调用当前元素的属性
- url()/uri() 用于引用媒体文件
- counter() 调用计数器,可以不使用列表元素实现序号功能,配合counter-increment和counter-reset属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素中content属性可取的值</title>
<style type="text/css">
.first::before{
content: "<";
}
.first::after{
content: ">";
}
.second{
background-color: red;
}
.second::after{
content: attr(red);
}
.third::after{
content: url("伪元素.html");
}
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
</head>
<body>
<div class="first">南风知我意,吹梦至西洲</div>
<div class="second">望庐山瀑布</div>
<div class="third">百度一下</div>
<h1>采菊东篱下</h1>
<h2>悠然见南山</h2>
</body>
</html>
3、使用
- 清除浮动
- 模拟float:center的效果
- 做出各种图形效果
- 不使用图片创建小图标
- 显示打印网页的URL
- 给blockquote添加引号
- 超链接特效
- ::before和::after实现多背景图片