CSS-伪类选择器

伪类选择器

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      a:link {
        color: yellowgreen;
      }
      a:visited {
        color: red;
      }
      a:hover {
        color: skyblue;
      }
      a:active {
        color: black;
      }
      input:focus {
        background-color: yellow;
      }
      p::-moz-selection {
        background-color: orange;
      }
      p::selection {
        background-color: orange;
      }
    style>
  head>
  <body>
    <a href="http://www.baidu.com">访问过的链接a>
    <br /><br />
    <a href="http://www.baidu123456.com">没访问过的链接a>

    <p>我是一个段落p>

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

web前端-html-css-伪类选择器

1. 说明

  1. 伪类专门用来表示元素的一种特殊的状态

比如;访问过的超链接,比如普通的超链接,比如获取焦点的文本框

  1. 当我们需要为处在状态的元素设置样式时,就可以使用伪类

2. 属性

  1. :link

表示普通的连接(没访问过的链接)

a:link {
  color: yellowgreen;
}
  1. :visited

表示访问过的链接

  • 1.浏览器是通过历史记录来判断一个链接是否访问过
  • 2.由于涉及到用户的隐私问题,所以使用 visited 伪类只能设置字体颜色
a:visited {
  color: red;
}
  1. :hover

伪类表示鼠标移入的状态

a:hover {
  color: skyblue;
}
  1. :active

表示的是超链接被点击的状态

a:active {
  color: black;
}
  1. 补充
  • :hover 和 active
    1. :hover 和 active 也可以为其他元素设置
    2. IE6 中,不支持对超链接以外的元素设置:hover 和 active
p:hover {
  background-color: yellow;
}

p:active {
  background-color: orange;
}
  • :focus

获取焦点

input:focus {
  background-color: yellow;
}
  • ::selection伪类
    1. 为p标签中选中的内容使用样式
    2. 注意:这个伪类在火狐中需要另一种方式编写::-moz-selection
/*
 * 兼容火狐的
 */
p::-moz-selection {
  background-color: orange;
}
/*
 * 兼容大部分浏览器的
 */
p::selection {
  background-color: orange;
}

你可能感兴趣的:(css,css,前端,html,css3,web)