学习HTML与CSS的第四天————伪类与伪元素

最新推荐文章于 2023-06-29 17:29:19 发布

不爱学习的大头

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量131

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104433834

版权

伪类选择器

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>伪类选择器</title>
      <style>
        /*
        * 伪类专门用来表示元素的一种特殊的状态，
        *   例如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
        * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
        */

        /*
        * 为没有访问过的连接设置一个颜色为绿色
        * :link
        *     - 表示普通的链接(没有访问过的链接)
        */
        
        a:link{
          color: green;
        }
        /*
        * 为访问过的链接设置一个颜色为红色
        * :visited
        *         - 表示访问过的链接
        *  浏览器是通过历史纪录来判断一个链接是否被访问
        * 由于涉及到用户的隐私，所以在使用visited伪类只能设置字体的颜色
        */
        a:visited{
          color:red;
        }
        /*
        * :hover表示鼠标移入
        */
        a:hover{
          color: black;
        }
        /*
        * :active表示超链接被点击的状态
        */
        a:active{
          color: coral;
        }
        /*
        * 文本框获取焦点之后，设置一个黄色的背景色
        */
        input:focus{
          background-color: yellow;
        }
        /*
        * 为p标签选中的内容设置样式
        * 可以使用::selection伪类
        */

        /*
        * 兼容大部分浏览器
        */
        P::selection{
          background-color:orange;
        }
      </style>
    </head>
    <body>
      <a href="http://www.baidu.com">访问过的连接</a>
      <br/>
      <a href="http://www.hao123.com">未访问的连接</a>
      <br/>
      <!--
        使用input标签可以创建一个文本输入框
      -->
      <p>我是一个p标签</p>
      <br/>
      <input type="text"/>
    </body>
</html>

伪元素

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>伪元素</title>
      <style>
        /*
        *   使用伪元素来表示元素中的一些特殊位置
        */
        /*
        * 为p中的第一个字符设置一个特殊的样式
        */
       /*  p:first-letter{
          color: brown;
          font-size: 20px;
        } */
        /*
        *   为p中的第一行设置一个背景颜色为黄色
        */
       /*  p:first-line{
          background-color:yellow;
        } */
        /*
        * :before表示元素最前面的部分
        * 一般before都需要结合content这个样式一起使用，
        * 通过content可以向before或after的位置添加一些内容
        */
        p:before{
          content: "我会出现在整个段落的最前面";
          color:red;
        }
        p:after{
          content: "我会出现在整个段落的最后面";
          color: brown;
        }
      </style>
    </head>
    <body>
      <p>不必说碧绿的菜畦，光滑的石井栏，高大的皂荚树，紫红的桑椹；也不必说鸣蝉在树叶里长吟，肥胖的黄蜂伏在菜花上，轻捷的叫天子（云雀）忽然从草间直窜向云霄里去了。单是周围的短短的泥墙根一带，就有无限趣味。油蛉在这里低唱，蟋蟀们在这里弹琴。翻开断砖来，有时会遇见蜈蚣；还有斑蝥，倘若用手指按住它的脊梁，便会拍的一声，从后窍喷出一阵烟雾。何首乌藤和木莲藤缠络着，木莲有莲房18一般的果实，何首乌有臃肿的根。有人说，何首乌根是有像人形的，吃了便可以成仙，我于是常常拔它起来，牵连不断地拔起来，也曾因此弄坏了泥墙，却从来没有见过有一块根像人样。如果不怕刺，还可以摘到覆盆子，像小珊瑚珠攒成的小球，又酸又甜，色味都比桑椹要好得远。</p>
    </body>
</html>

不爱学习的大头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习HTML与CSS的第四天————伪类与伪元素

伪类选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>伪类选择器</title> <style> /* * 伪类专门用来表示元素的一种特殊的状态， ...
复制链接

扫一扫