学习分享(4)css伪类
发布日期:2024-02-05 23:47:38 浏览次数:4 分类:技术文章

本文共 1914 字,大约阅读时间需要 6 分钟。

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;

        }

今天就学了这么谢谢大家

转载地址:https://blog.csdn.net/qq_18219159/article/details/127971569 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:学习分享(5)
下一篇:学习分享(12)

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年02月04日 07时34分26秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

JavaScript初学 学习笔记4:JavaScript之预编译深入浅出(看完肯定就懂了,别再放收到藏夹吃灰了) 2019-04-18
原生JS实现扫雷——项目总结 2019-04-18
原生JS实现——flappy bird 像素小鸟 项目总结 2019-04-18
数据结构实验——年级学生成绩管理系统 2019-04-18
数据结构实验——表达式二叉树( 以递归方式建立表达式的二叉树状结构,再分别输出前序 、中序及后序遍历结果,并计算表达式的结果。) 2021-06-21
1.LeetCode(两数之和)——JavaScript 2021-06-21
2.LeetCode(两数相加)——JavaScript 2021-06-21
1370.LeetCode(上升下降字符串)——JavaScript 2021-06-21
跟我学Spring Cloud(Finchley版)-09-Feign 2021-06-21
如何利用Python动态模拟太阳系运转 2021-06-21
python实现每天自动签到领积分的示例代码 2021-06-21
在 Python 中使用 MQTT的方法 2021-06-21
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法 2021-06-21
Python 处理日期时间的Arrow库使用 2019-04-18
Python使用socket模块实现简单tcp通信 2019-04-18
python 浮点数四舍五入需要注意的地方 2019-04-18
Python 实现简单的客户端认证 2019-04-18
Tensorflow使用Anaconda、pycharm安装记录 2019-04-18
Python实现画图软件功能方法详解 2019-04-18
Python如何定义接口和抽象类 2019-04-18