【HTML】CSS的伪类选择器01

最新推荐文章于 2022-11-02 23:34:40 发布

文思月

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量150

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44366571/article/details/101904724

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS的伪类选择器

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
比如： 访问访问过的超链接，比如普通的超链接，比如获取焦点的文本框等，下面的几种伪类选择器

：link

定义： 修饰普通的链接（没有访问过的链接）
语法： 元素：link{}

：visited

定义： 修饰访问过的链接(浏览器通过访问历史记录，判断是否访问过该链接，由于涉及到用户的信息，我们只能设置其颜色属性
语法： 元素：visited

：hover

定义： 修饰鼠标移入到链接上面是这个状态
语法： 元素：hover{}

：active

定义： 修饰鼠标点击到链接没有松手的这个状态
语法： 元素：active{}
另外hover和active也可以对其他元素进行操作
IE6中不支持点击超链接之外的元素

：focus

定义： 文本获取焦点后，设定的属性发生变化
语法： 元素：focus{}

：：selection

定义： 选择文本中的几个字或者段落的时候，设置其颜色的变化
语法： 元素：：selection{}
注意： 这个伪类在火狐浏览器不支持，
火狐浏览器语法： ：：-moz-selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type = "text/css">
  a:link{
    color: blue;
  }
    a:visited{
      color: red;
    }
    a:hover{
      color: yellow;
    }
    a:active{
      color: purple;
    }
    input:focus{
      background-color: yellow;
      font-size: 50px;
    }
    p::selection{
      color: orange;
    }
  </style>
</head>
<body>
<a class = "ha" href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a class = "h" href="http://www.baudu123.com">没有访问过的链接</a>
<input type = "text"/>
<p>我是一只猫</p>
</body>
</html>

文思月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】CSS的伪类选择器01

CSS的伪类选择器伪类的定义：伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。比如：访问访问过的超链接，比如普通的超链接，比如获取焦点的文本框等，下面是四种伪类选择器：link定义：表示普通的链接，（没有访问过的链接）语法：元素：link{}<!DOCTYPE html><html la...
复制链接

扫一扫