前言
持续学习总结输出中，今天分享的是Web前端，CSS伪类选择器扩展，链接伪类、焦点伪类、属性选择器
1、链接伪类选择器
常用于选中超链接的不同状态
| 选择器 | 功能 |
|---|---|
| a:link{} | 选中a链接 未访问过 的状态 |
| a:visited{} | 选中a链接 访问过后 的状态 |
| a:hover{} | 选中a链接 鼠标悬停 的状态 |
| a:active{} | 选中a链接 鼠标按下 的状态 |
a:link{}
a:visited{}
a:hover{}
a:active{}
注意点:
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写 记忆口诀:男盆友送了你一个 LV 包包，你开心的 HA 哈笑 • 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
小结
选中超链接的不同状态，常用哪些伪类选择器?
| 选择器 | 功能 |
|---|---|
| a:link{} | 选中a链接 未访问过 的状态 |
| a:visited{} | 选中a链接 访问过后 的状态 |
| a:hover{} | 选中a链接 鼠标悬停 的状态 |
| a:active{} | 选中a链接 鼠标按下 的状态 |
如果需要同时实现以上四种伪类状态效果，按照什么顺序书写? • 按照 LVHA 顺序书写
2、焦点伪类选择器
用于选中元素获取焦点时状态，常用于表单控件
语法
input:focus {
background-color: pink;
}
效果: • 表单控件获取焦点时默认会显示外部轮廓线
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 获得焦点的状态 */
/* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
input{
width:200px;
height: 26px;
}
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<input type="button">
</body>
</html>
运行结果
小结
选中表单控件获取焦点，可以使用什么伪类选择器?
• :focus{ }
3、属性选择器
属性选择器是通过元素上的HTML属性来选择元素，常用于选择 input 标签
| 选择器 | 功能 |
|---|---|
| E[attr] | 选择具有attr属性的 E 元素 |
| E[attr="val"] | 选择具有attr属性并属性值等于val 的 E 元素 |
代码参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input{
width:200px;
height: 26px;
}
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
运行结果
小结
选中页面中所有的文本框，使用属性选择器如何实现呢?
• input[type="text"] { }
总结
最后分享一句话：
曾被我轻视过的认为最没文化的人， 他们用自己的双手勤勤恳恳地劳动者， 他们做的事情是平凡而又伟大的。 《我的前半生》 ——爱新觉.溥仪
本次的分享就到这里了！！！
欢迎在评论区留言讨论！！！
