上一章聊了CSS的选择器，但是还有一种选择器名字伪类选择器和伪元素选择器
现在看一下：
-
伪类：伪类就是前面有一个
:的标签。也就是截图中多的那些。伪类本身是不存在的类，是一种特殊的类，伪类用来描述一个元素的特殊状态，比如：第一个元素，被点击的元素，鼠标一定的元素等等。
-
伪元素：前面有两个
:的标签。也就是截图中少的那些。
其实上面两种都有很多不过，只会演示一些常年用的，其它的如果使用的时候也可以根据演示的进行套用，即可或者翻看官方文档。
伪类选择器
演示只会演示常用的，而不是全部，不过这个可以看出了伪类的用法或者说作用
:first-child 或 :last-child 或 :nth-child
先来一个例子，比如
<!-- 写一个内部关联表CSS 让标签div下的第一个li的内容变成红色 最后一个为绿色 第三个为 黄色 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
</style>
</head>
<div>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
<li>这是4</li>
<li>这是5</li>
</div>
</body>
</html>
当然如果标签第一个li中添加属性，或者id,class等都可以解决这个问题，但是在工作中很多时候，HTML有自己的模板或者生成规则的，如果添加属性，id等会带来不变，而这个时候就可以使用伪类选择器了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
<!--
:first-child 找出满足的选择器中第一个第一个元素
:last-child 找出满足的选择器中最后一个第一个元素
:nth-child 找出满足的选择器中参数
n 第N个 从1开始
2n或者 even 表示偶数的元素
2n+1或者 odd 表述奇数的元素
-->
div>li:first-child{
color: #d10000;
}
div>li:last-child{
color:green;
}
div>li:nth-child(3){
color:yellow;
}
</style>
</head>
<div>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
<li>这是4</li>
<li>这是5</li>
</div>
</body>
</html>
看结果
看似解决问题，但是现在又有了一个新情况
<!-- 将div模块的内部标签变成如下 -->
<div>
<span>一般不会这样，但是为了演示就要加入</span>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
<li>这是4</li>
<li>这是5</li>
</div>
写的CSS 不变，然后看一下效果
可以看出第一个标签li没有变颜色，而且说是第三个也变成第二个了。因为first-child是表示标签下面所有的标签进行排序，而且没有满足li标签为第一个子孩子，所以不成立。而第三个也是包含了span标签。所以这就无法满足需求了。
简单的说：
:（*）-child 先将所有的孩子进行排序，然后再判断是否满足(:)前的标签，而（*）-of-type是先将(:)前的标签元素选出来，然后再排序进行选择哪一个。
补充
其实再nth-child(n)中的n其实不但代表一个数值的标志，而本身也是一个参数，而这个只能用n
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5的倍数 |
| n+5 | 从第五个元素到最后 |
| -n+5 | 前五个元素（包括第五个元素） |
:first-of-type 或 :last-of-type或 :nth-of-type
还是上面的要求如下写：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
div>li:first-of-type{
color: #d10000;
}
div>li:last-of-type{
color:green;
}
div>li:nth-last-of-type(3){
color:yellow;
}
<!--
:first-of-type 找出满足的选择器中第一个各自标签类第一个元素
:last-of-type 找出满足的选择器中各自标签类最后一个第一个元素
:nth-of-type 找出满足的选择器中各自标签类参数
n 第N个 从1开始
2N或者 even 表示偶数的元素
2N+1或者 odd 表述奇数的元素
-->
</style>
</head>
<div>
<span>一般不会这样，但是为了演示就要加入</span>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
<li>这是4</li>
<li>这是5</li>
</div>
</body>
</html>
这个可以看出 first-child和first-of-type的区别了，一个是全部一个是各自，所以在使用的时候注意。
:link 和 :visited
这两个伪类只有在标签<a>可以使用，其它的的标签无法使用。
- :link 用来表示所有的a连接标签
- :visited 表示访问过a连接标签，由于隐私的原因，所以visited只能修改伪类链接的颜色。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
a:link{/* :link 这样写也行 */
color: #d10000;
font-size: 50px;
}
a:visited{ /* :visited 这样写也行 */
color: green;
font-size: 10px;
}
</style>
</head>
<div>
<a href="https://www.baidu.com/" >链接1</a>
<br />
<br />
<a href="https://www.baidu.com/" >链接2</a>
</div>
</body>
</html>
然后点击一下链接2看一下结果：
:active 和 :hover
这两个伪类很多时候会和标签a一起使用，不过其它的标签也可以使用这两个伪类。
还是演示看一下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
a:hover{
color: red;
font-size: 50px;
}
a:active{
color:green;
font-size: 50px;
}
</style>
</head>
<div>
<a href="https://www.baidu.com/" >链接1</a>
<br />
<br />
<a href="https://www.baidu.com/" >链接2</a>
</div>
</body>
</html>
如果不将鼠标放在标签上，而且不点击标签，如下：
然后将鼠标放在标签链接1上：
然后用鼠标点击，这个点击其实就是鼠标在链接标签上点击，但是点击完成后就失效了。
伪元素选择器
现在也是演示最常用的几个伪元素。
- ::first-letter 表示第一个字符
- ::first-line 表示第一行字符
- ::selection 表示又鼠标选择的字符
- ::before 文本内容前插入 必须结合content属性来使用
- ::after 文本内容后插入 必须结合content属性来使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
p{
width: 600px;
}
p::first-letter{
font-size: 20px;
}
p::first-line{
color: #d10000;
}
p::selection{
color: #4a90e2;
}
p::before{
content: "AAAAAA";
}
p::after{
content: "BBBBBB";
}
</style>
</head>
<div>
<p> 仇囚从来都不觉得杀手是一个违背良心的事情，毕竟对于自己来说就是一门营生。 你给我钱，我帮你解决麻烦就是如此简单。</p>
</div>
</body>
</html>
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
