伪类选择器的使用和语法
需积分: 25 43 浏览量
2022-09-19
15:13:26
上传
评论
收藏 422KB PDF 举报
第4集 CSS核心----特殊的选择器
简介：CSS中特殊的选择器—伪类选择器的使用
特殊的选择器
伪类选择器
作用1：选中，⼀些元素的，特殊效果
作用2：在某些场景，选中某些元素
案例演示
1、超链接常用的选择器：
注意事项：
1、hover必须放在link和visited的后面【因为悬浮的样式，必须是在，已选中或者未选中之后，才
能生效（跟 css的层叠样式表有关）】
2、这4个样式的，顺序必须这样写【按案例演示，来做，换顺序会失效】
/* 需要注意顺序 */
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* ⿏标悬浮后的链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
/* 某些情况下好⽤的伪类选择器 */
元素:first-child {}
元素:last-child {}
元素:nth-child(n) {} //非常好用，因为它能写一些公式，根据指定公式，来选择符合匹配的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊的选择器</title>
</head>
<style>
/* 未选中 */
a:link {
color: brown;
}
/* 已访问的链接 */
a:visited {
color:yellow;
}
/* 悬浮的状态 */
a:hover {
color:green;
}
/* 选中时的颜色[就是点击时，变的颜色] */
a:active {
color:red;
评论0
最新资源