伪类选择器的基础使用介绍和伪元素选择器的初步介绍

Tea-pd

已于 2022-06-18 23:12:23 修改

阅读量177

点赞数 5

文章标签： css vue.js 前端 html css3

于 2022-06-17 20:33:25 首次发布

本文链接：https://blog.csdn.net/tea_tea_/article/details/125338954

版权

前言：本人是新生小白，如有错误之处欢迎指出

首先我们先来了解一下什么是伪类选择器，在此之前先写一个基础的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <div>你好</div>
        <div>你好</div>
        <div>你好</div>
        <div>你好</div>
</body>
</html>

然后我们在style样式中添加伪类选择器，先添加第一种：first-child此种类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 第一种写法是说在父元素的所有子元素中寻找第一个p元素，即使他们不是相同元素或者说第一个不是p元素 */
        p:first-child{          
            color: aqua;
        }
 /* 第二种写法是说在父元素的所有子元素中寻找最后一个p元素，即使他们不是相同元素或者说最后不是p元素，但在这里由于最后一个子元素是div，他们共同的父级是body
 所以无法生效 */
        p:last-child{
            color: yellowgreen;
        }
 /* 第三种写法是说在父元素的所有子元素中寻找偶数的p元素，例如2，4，6.*/
        p:nth-child(2n){
            color: violet;
        }
/* 第三种写法是说在父元素的所有子元素中寻找奇数的p元素，例如1.3.5.*/
        p:nth-child(2n+1){
            font-size: 50px;
        }
/* 这种写法是说在父元素的所有子元素中，从后向前选择,最后6个标签，且为div才能生效*/
        div:nth-last-child(-n+6){
            background-color: rgb(255, 183, 0);
        }


     
        /*  n:所有的行

            2n:每2行选择一行

            3n:每3行选择一行

             n+2:除第1行外所有的行,即从第二行开始

            2n+3 以第3个为开始偶数排列找所对应的需求标签

           :nth-last-child(n) 从后向前选择,n为参数,匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
            这两个属性都是:nth-last-child(n) 的属性
            A.   2:倒数第2行
            B.  -n+6:最后6行
            如果写成 
            div:nth-last-child(-n+6)
            {
            background-color: rgb(255, 183, 0);
           }

           所设父元素下最后一个必须为div才会有效果，如果写成 p:nth-last-child(-n+6)就无法达到想要的效果
           
        
       ! 以上这些伪类都是根据所有的子元素进行排序
        ! 以上这些伪类都是根据所有的子元素进行排序
         ! 以上这些伪类都是根据所有的子元素进行排序*/
        

      
    </style>
</head>

<body>
        <p>你好</p>
        <p>你好</p>
        <p>你好h</p>
        <p>你好aaaaa</p>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
</body>
</html>

着重强调

! 以上这些伪类都是根据所有的子元素进行排序

! 以上这些伪类都是根据所有的子元素进行排序*/

接下来介绍：first-of-type类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一种写法是说在父元素的子元素当中的p元素中寻找第一个p元素，*/
            p:first-of-type{
                color: aqua;
            }
   /* 第二种写法是说在父元素的子元素当中的p元素中寻找最后一个p元素，*/
            p:last-of-type{
                color: rgb(247, 2, 2);
            }
 /* 第三种写法是说在父元素的子元素当中的p元素中寻找偶数的p元素，*/
            p:nth-of-type(2n){
                color: rgb(17, 223, 93);
            }
 /* 第三种写法是说在父元素的子元素当中的p元素中寻找奇数的p元素，*/
            p:nth-of-type(2n+1){
                background-color: rgb(203, 138, 42);
              
            }
/* 第四种写法是说在父元素的子元素当中的p元素中寻找以3为开始偶数的p元素，*/
            p:nth-of-type(2n+3){
                background-color: rgb(189, 35, 227);
              
            }

/* 第五种写法是说在父元素的子元素当中的div元素中最后一个开始数第7个，而下面那个值为8时没有效果是因为只写了7个div。倒数第8个标签是p，所有无法生效*/
            div:nth-last-of-type(7){
                font-size: 50px;
            }



            div:nth-last-of-type(8){
                font-size: 500px;
            }
/* 从后向前选择,-n+   为参数,匹配属于其元素的最后几行 ，下面写的是-n+6，则就是最后六行*/
            div:nth-last-of-type(-n+6){
                background-color: yellow;
            }

            



            
    </style>


             ！这是在父元素中同类型的子元素中去选择 
             ！这是在父元素中同类型的子元素中去选择   
            ！这是在父元素中同类型的子元素中去选择   
</head>

<body>
        <p>你好</p>
        <p>你好</p>
        <p>你好h</p>
        <p>你好aaaaa</p>
        <p>晚上好</p>
        <p>晚上好</p>
        <p>晚上好</p>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
</body>
</html>

着重强调！！！

！以上的这是在父元素中同类型的子元素中去选择

然后再说一下伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   /* 这个表示第一个字母 */
   p::first-letter{
        color: violet;
      }

   /* 这个表示第一行文本 */
      p::first-line{
        color: blue;
      }
       /* 这个表示选中的内容 */
      p::selection{
        background-color: turquoise;
        color: violet;
       
      }
 /* 这个表示在元素的开始位置,且必须和content一起使用，所写的属性值也只作用于在content中写的内容，content的内容会显示在文本中 */
      p::before{
        color: brown;
        content: 'hhhhh';
      }
/* 这个表示在元素的结束位置,且必须和content一起使用，所写的属性值也只作用于在content中写的内容，content的内容会显示在文本中 */
      p::after{
        color: burlywood;
        content: 'iiiii';
      }
            
    </style>
</head>

<body>
        <p>你好</p>
        <p>你好</p>
        <p>你好h</p>
        <p>你好aaaaa</p>
        <p>晚上好</p>
        <p>晚上好</p>
        <p>晚上好</p>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
        <div>你也是</div>
</body>
</html>

这里只简单的说了5个常用的，还有很多由于本人很菜，还未掌握，欢迎大佬留言或私信帮忙补充