学习分享（4）css伪类

CSS伪类是用来添加一些选择器的特殊效果。

解释：在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

 一 、伪类（不存在的类，特殊的类）

          定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定

          例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

             常见的伪类选择器

              语法使用‘:’开头

              :first-child   第一个元素

              :last-child    最后一个元素

              :nth-child()   选中第几个元素

                特殊值：

                  2n或even    偶数

                  2n+1或odd   奇数

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

            :first-of-type 第一个元素

            :last-of-type  最后一个元素

            :nth-of-type()   选中第几个元素

         

          —功能跟上面相似，不同的是，这是在同类型的子元素中去选择

                         

     二、:not() 否定伪类

           -将符合条件的元素从选择器中去除  */

        需求二：给所有诗句加背景色，除了l1 */

        span:first-child{

          color: red;

        }  

        li:not(#l1){

          background-color: green;

        }

        li{

          /* 去除li的项目符号 */

          list-style: none;

        }

        a{

          /* 去除a标签的下划线 */

          text-decoration: none;

        }

        h1{

          /* 增加下划线 */

          text-decoration: underline;

        }

三，超链接中的伪类：

      需求一：给未访问过的超链接加红色字体 */

      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;

      }

      h1:hover{

        color: green;

        background-color: hotpink;

      }

      需求四：鼠标点击后，增加背景色pink */

      4、:active  鼠标点击后的状态 */

      a:active{

        background-color: pink;

      }

      div:active{

        color: red;

      }

      /*

      注意：

        :hover和:active  针对所有的元素

伪类选择器：需求一：让文章的首字母一直为字体为24px */

      1、::first-letter  第一个字母  */

      需求二：让文章的第一行添加背景色黄色 */

      2、::first-line  第一行  */

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

      3、::selection  选中的内容 */

      需求四：在元素开始的位置前+'abc' */

      4、::before  在元素的最前面

              必须要配合content样式名使用 */

        5、::after  在元素的最后面

              必须要配合content样式名使用 */

具体代码如下

      p::first-letter {

        font-size: 34px;

      }

      p::first-line {

        background-color: yellow;

      }

      p::selection {

        color: red;

      }

      p::before{

        content: "你好";

      }

      p::after{

        content: '你也好啊';

      }

     还学习了一个关于继承的知识点：

      /样式的继承（继承祖先的资产）

            定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，

            优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整

            注意：不是所有的样式都能继承，一般情况布局上样式

      

       共同的祖先元素，设置统一的字体大小、字体颜色、行高、字体等 */

       body{

         font-size: 12px;

         color: #3c3c3c;

       }

        p{

          color: red;

          font-size: 30px;

        }

今天就学了这么谢谢大家