上一章聊了CSS的选择器,但是还有一种选择器名字伪类选择器和伪元素选择器
现在看一下:
伪类:伪类就是前面有一个:
的标签。也就是截图中多的那些。
伪类本身是不存在的类,是一种特殊的类,伪类用来描述一个元素的特殊状态,比如:第一个元素,被点击的元素,鼠标一定的元素等等。
伪元素:前面有两个:
的标签。也就是截图中少的那些。
其实上面两种都有很多不过,只会演示一些常年用的,其它的如果使用的时候也可以根据演示的进行套用,即可或者翻看官方文档。
演示只会演示常用的,而不是全部,不过这个可以看出了伪类的用法或者说作用
先来一个例子,比如
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档title>
<style type="text/css">
style>
head>
<div>
<li>这是1li>
<li>这是2li>
<li>这是3li>
<li>这是4li>
<li>这是5li>
div>
body>
html>
当然如果标签第一个li中添加属性,或者id,class等都可以解决这个问题,但是在工作中很多时候,HTML有自己的模板或者生成规则的,如果添加属性,id等会带来不变,而这个时候就可以使用伪类选择器了
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档title>
<style type="text/css">
div>li:first-child{
color: #d10000;
}
div>li:last-child{
color:green;
}
div>li:nth-child(3){
color:yellow;
}
style>
head>
<div>
<li>这是1li>
<li>这是2li>
<li>这是3li>
<li>这是4li>
<li>这是5li>
div>
body>
html>
看结果
看似解决问题,但是现在又有了一个新情况
<div>
<span>一般不会这样,但是为了演示就要加入span>
<li>这是1li>
<li>这是2li>
<li>这是3li>
<li>这是4li>
<li>这是5li>
div>
写的CSS 不变,然后看一下效果
可以看出第一个标签li没有变颜色,而且说是第三个也变成第二个了。因为first-child是表示标签下面所有的标签进行排序,而且没有满足li标签为第一个子孩子,所以不成立。而第三个也是包含了span标签。所以这就无法满足需求了。
简单的说:
:(*)-child 先将所有的孩子进行排序,然后再判断是否满足(:)前的标签,而(*)-of-type是先将(:)前的标签元素选出来,然后再排序进行选择哪一个。
其实再nth-child(n)中的n其实不但代表一个数值的标志,而本身也是一个参数,而这个只能用n
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5的倍数 |
n+5 | 从第五个元素到最后 |
-n+5 | 前五个元素(包括第五个元素) |
还是上面的要求如下写:
<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>这是1li>
<li>这是2li>
<li>这是3li>
<li>这是4li>
<li>这是5li>
div>
body>
html>
这个可以看出 first-child和first-of-type的区别了,一个是全部一个是各自,所以在使用的时候注意。
<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/" >链接1a>
<br />
<br />
<a href="https://www.baidu.com/" >链接2a>
div>
body>
html>
然后点击一下链接2
看一下结果:
这两个伪类很多时候会和标签a一起使用,不过其它的标签也可以使用这两个伪类。
还是演示看一下:
<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/" >链接1a>
<br />
<br />
<a href="https://www.baidu.com/" >链接2a>
div>
body>
html>
如果不将鼠标放在标签上,而且不点击标签,如下:
然后将鼠标放在标签链接1上:
然后用鼠标点击,这个点击其实就是鼠标在链接标签上点击,但是点击完成后就失效了。
现在也是演示最常用的几个伪元素。
<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>