iOS开发html+css学习之伪类选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
伪类专门用来表示元素的一种的特殊的状态
比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框

        当我们需要为处在这些特殊状态的元素设置样式试,就能使用伪类
     */

     /* 
        为没访问过的链接设置一个颜色为绿色
        :link
            - 表示普通的链接(没访问过的链接)
      */

      a:link {
          color: yellowgreen;
      }

      /* 
        为访问过的链接设置一个颜色为红色
        :visited
            - 表示访问过的链接

        浏览器是通过历史记录来判断一个链接是否访问过
        由于涉及到用于的隐私问题,所以visited伪类只能设置字体的颜色
          font-size: 50px;
          background-color: yellow;
        都不会生效

       */
      a:visited {
          color: red;
      }

      /* 
        :hover伪类表示鼠标移入的状态
       */
      a:hover {
          color: blue;
      }

      /* 
        :active表示的超链接被点击的状态
       */

      a:active {
          color: black;
      }

      /* 
        :hover和:active也可以为其他元素设置
        IE6中不支持对超链接以为的元素设置:hover和:active
       */
      /* p:hover {
          background-color: yellow;
      }

      p:active {
          background-color: orange;
      } */

      /* 
        文本框获取焦点以后,修改背景颜色为黄色
       */
      input:focus {
          background-color: yellow;
      }

      /* 
        为p标签中选中的内容设置样式
        可以使用  ::selection伪类
        注意:这个伪类在火狐中需要采集另一种方式编写::-moz-selection
       */
       /* 
        兼容大部分浏览器的
        */
       p::selection {
           background-color: orange;
       }
       /* 
        兼容火狐的
        */
       p::-moz-selection {
           background-color: gray;
       }

    </style>
</head>

<body>
<a href="http://you.163.com">严选主站</a>



<a href="http://www.baidu.com">百度地址</a>

<p>我是一个段落</p>


<input type="text">
</body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,581评论 1 62
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,765评论 0 8
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,214评论 0 1
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,626评论 0 20
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 2,020评论 1 11

友情链接更多精彩内容