CSS伪类和伪元素
2019-06-25 本文已影响0人
椰果粒
1. 什么是伪类和伪元素
伪类就是假的类
伪元素就是假的元素
1.1. 伪类
作用：
- 格式化DOM树以外的信息，比如
<a>标签的:link, :visited等。这些本身是不存在于DOM树中的。 - 获取不能被常规CSS选择器获取到的信息。比如获取第一个子元素，我们可以用
:first-child，常规方式一般是获取不到的。
1.2. 伪元素
伪元素可以创建一些文档语言无法创建的虚拟元素
- 文档语言没有能描述元素第一个字母或者第一行的，可以用伪元素
::first-letter :first-line - 伪元素可以创建原文档不存在的内容，比如
::before ::after
1.3. 伪类与伪元素的区别
-
伪类主要是弥补CSS选择器不足的情况，更好的获取数据
-
伪元素主要是创建了虚拟的元素，我们可以向其中添加内容或者样式。
-
伪类用单冒号
-
伪元素用双冒号
2. 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* first-child 伪类，选择了第一个li，并给他改变样式。 */
li:first-child{
color: red;
}
/* last-child伪类 匹配最后一个子元素 */
li:last-child{
font-size: 30px;
}
/* first-of-type 匹配它的父元素的第一个符合要求的子元素 */
p:first-of-type{
color: yellow;
}
/* 注意：first-of-type与first-child的区别：first-child表示第一个子元素，如果p:first-child，是页面不会有变化，因为p不是它的父元素的第一个子元素。 */
/* last-of-type 匹配它的父元素的最后一个符合要求的元素 */
p:last-of-type{
color: orange;
}
/* 伪元素 ::first-letter 对元素的第一个字母操作 */
li::first-letter{
background-color: blue;
}
/* 如果前面有特殊字符，特殊字符和正常字符的第一个都会被选择的 */
nav::first-letter{
font-size: 30px;
}
/* 伪元素：first-line 对元素的第一行操作，只适用于块级元素
比如将浏览器的宽度拉伸或者缩小，都是只有第一行会变色。
*/
.content::first-line{
color: mediumvioletred;
}
/* 伪元素 ::before 在选定元素之前插入内容，需要指定content */
span::before{
content: "add a content before! "
}
/* 伪元素 ::after 在选定元素之后插入内容，需要指定content */
span::after{
content: "add a content after! "
}
/* 伪元素 ::selection 匹配被用户选中的部分 用户一选中，就会变成绿色*/
.content::selection{
color: green;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
</ul>
<p>this is a p</p>
<p>this is another</p>
<p>this is last p</p>
<span>this is a span</span>
<nav>?!*%this is a nav</nav>
<div class="content">
学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素
</div>
</div>
</body>
</html>
结果：
伪类和伪元素
