<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/*
一、伪类：同一个标签在不同的状态下，显示的样式是不同的，这一类标签，称为伪类
例如：超链接（未被点击过，已被点击过，属标鼠标悬停时，鼠标正在点击时）了-
二、伪类选择器：选中标签状态的选择器，为标签的状态指定样式。伪类选择器都是以“：”开头
1.链接伪类选择器
：link选择未被访问的链接
：visited选择已被访问的链接
上述两个选择器仅对于超链接使用，下面两个选择器任何标签使用
：hover选择鼠标“悬停”时
：active选择鼠标正在电击时（鼠标点击，不松开时）
2.其他伪类选择器
：first-chind 匹配第一个子元素
：last-chind 匹配最后一个子元素
：nth-chind（n） 匹配第n个子元素
n的值可以是以下三种方式
数字
关键字 odd奇数 even偶数
公式（an+b）ab是自然数，n从0开始，递增1
：first-of-type 匹配同类型的第一个元素
：last-of-type 匹配同类型的最后一个元素
：nth-of-type（n） 匹配同类型的第n个子元素
E:first-child 匹配父元素下的第一个元素是不是E，是则选中，不是则不选
E：first-of-type 匹配父元素下所有的子元素中的第一个E
：focus 获取某个标签的焦点时（比如文本框）
*/
a:link{
color: yellowgreen;
}
a:visited{
color: indianred;
}
a:hover{
background-color: #dce2f1;
}
a:active{
background-color: #7edcc7;
font-size: 30px;
}
/*div p:first-child{
color: red;
}
*/
div p:last-child{
color: red;
}
div p:nth-child(2n+0){
color: blue;
}
div p:first-of-type{
color:red;
}
input:focus{
background-color: #7edcc7;
}
</style>
</head>
<body>
<a href="#">超链接</a>
<div>
<span>我是span</span>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
<p>第5个</p>
</div>
<input type="text">
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)