CSS基础之 伪类和伪元素

上一章聊了CSS的选择器,但是还有一种选择器名字伪类选择器和伪元素选择器

现在看一下:

CSS基础之 伪类和伪元素_第1张图片

  • 伪类:伪类就是前面有一个:的标签。也就是截图中多的那些。

    伪类本身是不存在的类,是一种特殊的类,伪类用来描述一个元素的特殊状态,比如:第一个元素,被点击的元素,鼠标一定的元素等等。

  • 伪元素:前面有两个:的标签。也就是截图中少的那些。

其实上面两种都有很多不过,只会演示一些常年用的,其它的如果使用的时候也可以根据演示的进行套用,即可或者翻看官方文档。

伪类选择器

演示只会演示常用的,而不是全部,不过这个可以看出了伪类的用法或者说作用

:first-child 或 :last-child 或 :nth-child

先来一个例子,比如



<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>

看结果

CSS基础之 伪类和伪元素_第2张图片

看似解决问题,但是现在又有了一个新情况


<div>
    <span>一般不会这样,但是为了演示就要加入span>
    <li>这是1li>
    <li>这是2li>
    <li>这是3li>
    <li>这是4li>
    <li>这是5li>
div>

写的CSS 不变,然后看一下效果

CSS基础之 伪类和伪元素_第3张图片

可以看出第一个标签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

还是上面的要求如下写:


<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>

CSS基础之 伪类和伪元素_第4张图片

这个可以看出 first-child和first-of-type的区别了,一个是全部一个是各自,所以在使用的时候注意。

:link 和 :visited

这两个伪类只有在标签可以使用,其它的的标签无法使用。

  • :link 用来表示所有的a连接标签
  • :visited 表示访问过a连接标签,由于隐私的原因,所以visited只能修改伪类链接的颜色。

<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看一下结果:

CSS基础之 伪类和伪元素_第5张图片

:active 和 :hover

这两个伪类很多时候会和标签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>

如果不将鼠标放在标签上,而且不点击标签,如下:

CSS基础之 伪类和伪元素_第6张图片

然后将鼠标放在标签链接1上:

CSS基础之 伪类和伪元素_第7张图片

然后用鼠标点击,这个点击其实就是鼠标在链接标签上点击,但是点击完成后就失效了。

CSS基础之 伪类和伪元素_第8张图片

伪元素选择器

现在也是演示最常用的几个伪元素。

  • ::first-letter 表示第一个字符
  • ::first-line 表示第一行字符
  • ::selection 表示又鼠标选择的字符
  • ::before 文本内容前插入 必须结合content属性来使用
  • ::after 文本内容后插入 必须结合content属性来使用

<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>

在这里插入图片描述

你可能感兴趣的:(CSS,css,css3,伪元素,伪类)