伪类及其选择器

伪类选择器

一、伪类（不存在的类，特殊的类）
       定义：不真实存在的类，它表示的元素的一种状态
       例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

二、常见的伪类选择器
              语法使用’:'开头
              ：first-child 第一个元素
              ：last-chil 最后一个元素
              : nth-child（） 选中第几个元素
特殊值：
              2n或者even 偶数
              2n+1或者odd 奇数
               -以上这些伪类都是根据所有的子元素进行排序

               ：first-of-type 第一个元素
               :last-of-type 最后一个元素
               :nth-of-type() 选中第几个元素
               -功能跟上面相似，不同的是，这是在同类型的子元素中去选择

<style>
li:first-child{
            color: red;
        }
</style>

二、：not（）否定伪类
               -将符合条件的元素从选择器中去除

<style>
li:not(.l1){
            background-color: pink;
        }
</style>

a元素的伪类

<style>
    /* 需求一：给未访问过的超链接加共色字体 */
    /* 1\:link  没有访问过的状态 */
    a:link{
        color: orange;
    }

    /* 需求二：给访问过的超链接加绿色字体 */
    /* 2、:visited  访问过的转态 */
    a:visited{
        color: green;
        /* 以下样式不生效 */
        font-size: 50px;
        background-color: pink;
    }
    /* 
    注意：
        1、:link和:visited 是a标签独有的伪类
        2、由于隐私问题，:link和:visited只能设置字体颜色
    */

    /* 需求三：鼠标移入，连接字体变大到30px */
    /* 3、:hover   鼠标移入的状态 */
    a:hover{
        font-size: 30px;
        /* color: red;
        background-color: pink; */
    }
    h1:hover{
        color: green;
        background-color: hotpink;
    }

    /* 需求四：鼠标 点击后，增加背景色pink */
    /* 4、:active   鼠标点击后的状态 */
    a:active{
        background-color: pink;
    }
    div:active{
        color: red;
    }
    /* 
    注意：
    :hover和:active是所有
    */
</style>

伪类元素选择器

    <style>
        /* 需求一：让文章的首字母一直为字体24px */
        /* 1、::first-letter    第一个字母*/

        /* 需求二：让文章的第一行添加背景色黄色 */
        /* 
        2、::first-line 第一行*/

        /* 需求三：让选中的内容，字体为红色 */
        /* 3、::selection   选中的内容 */

        /* 需求四：在元素开始的位置前加'abc' */
        /* 4、::before  在元素的最前面 
                必须要配合content样式名使用
            ::after     在元素的后面
                必须要配合content样式名使用
                */
        p::first-letter{
            font-size: 30px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            color: red;
        }
        p::before{
            content: "你好";
        }
        p::after{
            content: "你也好啊";
        }
    </style>

继承

样式的继承（继承祖先的资产）
              定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或者后代元素上
              优势：一般情况下，样式的继承是对我们开发有利的，不需要额外调整
              注意：不是所有的样式都能继承，一般情况布局上样式不会被继承

<style>
 body{
            font-size: 12px;
            color: #3c3c3c;
        }
        p{
            color: red;
            font-size: 30px;
        }
    </style>

选择器的权重

样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，是看选择器的权重，谁的权重高，就有效果。
选择器的权重
              内联样式 ：1000
              id选择器 ：100
              class选择器/属性选择器 ：10
              元素选择器 ：1
              通配选择器 ：0
              继承样式 ：没有权重
（这里的值不是确切权重，只为区分大小）
注意：
1、如果选择器的权重一样，那么谁靠下，就谁生效；
2、要让所有选择器的权重相加，最终谁大听谁的；
3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重；
4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的；
5、!important 是最高的权重 但慎用， 一般情况下，可以测试使用,用来测试是否是选择器权重的问题。
如果样式设置不成功：
1、你没选中；
2、选择器权重问题，使用!important进行测试。

<style>
      body{
        background-color: lawngreen;
      }
      *{
        background-color: rgb(82, 82, 228);
      }
      div,.dd{
        background-color: green;
      }
      .dd.d1.d1.d3{
        background-color: red;
      }

      #dv{
        background-color: pink;
      } 
      [id]{
        background-color: hotpink;
      }
      .dd>span{
        color: green;
      }
      #dv span{
        color: red;
      }
     
    </style>

display

<style>
        div{
            background-color: pink;
            /* 将元素转成行内元素 */
            /* display: inline; */
            /* 设置元素的宽度 */
            width: 300px;
            /* 设置元素的高度 */
            height: 200px;
        }
       em{
            background-color: green;
            /* 将元素转成块元素 */
            /* display: block; */
            /* 将元素转成行内块元素 */
            display: inline-block;
            width: 300px;
            height: 200px;
        }
            /* 
              display 实现元素之间的相互转换
                可选值：
                  block  将元素转成块元素
                  inline   将元素转成行内元素
                  inline-block  将元素转成行内块元素
                  none    隐藏元素
            */
        em:hover~p{
            display: block;
        }
        p{
            /* 隐藏元素 */
            display: none;
        }
        section{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        /* 需求一：鼠标移入section，更换背景色红色 */
        /* 需求二：strong文字隐藏，鼠标点击section的时候，strong出现 */
        section:hover{
            background-color: red;
        }
        strong{
            display: none;
        }
       section:active>strong{
           display: block;
       }
    </style>

插一个前面的知识点
元素分类
    块元素
        1、独占一行
        2、宽度是父元素或祖先元素内容区宽度
        3、高度是被内容撑开，可以自定义宽高
    行内元素
        1、不会独占一行
        2、宽高都是被内容撑开，不可以自定义宽高
    行内块元素
        兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高