CSS-5.1-伪类选择器

CSS-5.1-伪类选择器

  • 一:伪类选择器
    • 1、静态伪类
    • 2、动态伪类
  • 二:超链接a标签
    • 1、超链接的四种状态
    • 2、a{}和a:link{}的区别

一:伪类选择器

  • 伪类:
    • 同一个标签,根据其不同的状态,有不同的样式
  • 伪类用冒号来表示

伪类选择器分为两种
1.静态伪类:只能用于超链接的样式
2.动态伪类:针对所有标签都适用的样式

1、静态伪类

  • 静态伪类:只能用于超链接的样式
    • :link:点击超链接之前
    • :visited:超链接被访问过后

2、动态伪类

  • 动态伪类:针对所有标签都适用的样式
    • :hover:鼠标悬停到标签的时候
    • :active:鼠标点击标签不松手的时候
    • :focus:是某个标签获得焦点时的样式(比如某个输入框获得焦点)

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态伪类选择器title>
	<style type="text/css">
		/* 
		让文本框获得焦点时
		边框:3像素蓝色实线
		字体颜色:白色
		文本框背景:红色
		 */
		input:focus{
			border: 3px solid blue;
			color: white;
			background-color: red;
		}
		/*
		鼠标悬停在标签上时显示蓝色
		*/
		label:hover{
			color: blue;
		}
		/*
		点击标签未松鼠标时显示红色
		*/
		label:active{
			color: red;
		}
	style>
head>
<body>
	请输入姓名:
	<input type="text" name="text"> <br>
	<label>提交label>
body>
html>

效果动态图
CSS-5.1-伪类选择器_第1张图片

二:超链接a标签

1、超链接的四种状态

  • :link:点击超链接之前
  • :visited:超链接被访问过后
  • :hover:鼠标悬停到标签的时候
  • active:鼠标点击标签不松手的时候

注意事项
1.在CSS中,超链接的四种状态必须按照固定的顺序写
2.如果不按照顺序,那么将失效


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接伪类选择器title>
	<style type="text/css">
		/* 未点击超链接时是红色 */
		a:link{
			color: red;
			text-decoration: none;
		}
		/* 点击超链接之后是橙色 */
		a:visited{
			color: orange;
		}
		/* 鼠标悬停未点击时是绿色 */
		a:hover{
			color: green;
		}
		/* 鼠标点击未松手时是黑色 */
		a:active{
			color: black;
		}
	style>
head>
<body>
	<a href="http://www.4399.com" target="_blank">大型游戏a>
body>
html>

效果动态图

CSS-5.1-伪类选择器_第2张图片

2、a{}和a:link{}的区别

  • a{}
    • 定义的样式针对所有的超链接(包括锚点)
  • a:link{}
    • 定义的样式针对所有写了href属性的超链接(不包括锚点)

你可能感兴趣的:(WEB前端,CSS)