CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。
今天我们先来接触:hover、active和:focus这三种状态伪类选择器。
:hover选择器、:active选择器和:focus选择器
:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；
:active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
:focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；
【注】下方案例运行效果，之所以点击后立即变为绿色是因为active触发的同时focus也触发了，所以active定义的样式看似无效，大家可以先把focus定义的样式注释掉运行；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3实例教程:hover、active和:focus伪选择器——网页教学网webjx.com</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul{margin:50px auto; width:260px; height:100px; list-style:none;}
ul li{margin-bottom:10px; overflow:hidden;}
label,input{display:inline; float:left;}
label{padding-right:8px; width:50px; height:27px; line-height:27px; text-align:right;}
input{width:200px; height:25px; border:1px #eee solid; border-top:1px #d1d1d1 solid; outline:none;}
input:hover{background:#eff7ff;}
input:active{background:#ffd;}
input:focus{background:#f2fddb;}
</style>
</head>
<body>
<ul>
<li>
<label for="userName">姓名:</label>
<input id="userName" type="text"/>
</li>
<li>
<label for="userPwd">密码:</label>
<input id="userPwd" type="password"/>
</li>
</ul>
</body>
</html>
相关推荐
例如，伪类选择器如`:hover`、`:active`、`:focus`和`:nth-child()`，使得元素的动态效果和响应式设计更加容易实现。CSS3还引入了边框半径（`border-radius`）、阴影（`box-shadow`和`text-shadow`）、渐变（linear-...
1. **选择器增强**：CSS3增加了更多的选择器，如属性选择器、伪类选择器（`:hover`、`:active`、`:focus`）和伪元素选择器（`::before`、`::after`），使样式控制更精确。 2. **边框和背景**：CSS3引入了圆角边框...
4. 伪类选择器，如`:hover`、`:active`、`:focus`，用于元素在特定状态下的样式变化。 二、CSS3特效 CSS3带来了许多新的视觉特效，提升用户体验： 1. 渐变（gradients）：线性渐变和径向渐变，提供了比传统背景颜色...
CSS3允许开发者使用选择器来精确地定位和操作元素，比如伪类选择器`:hover`、`:active`、`:focus`等，以及基于属性的选择器 `[attr=value]`。它还引入了多列布局（column-count、column-gap等），使得创建报纸样式的...
总结一下，这个压缩包提供的是一种纯CSS3方法，利用伪类选择器`:before`、`:hover`、`:focus`和`:active`，结合特定的字体库，来实现图标标签的创建。这种方法对于前端开发者来说，既节省资源又易于维护，同时也支持...
选择器的增强使得定位元素更为精确，如伪类选择器`:hover`、`:active`和`:focus`等，以及更复杂的子元素和属性选择器。CSS3还引入了边框和背景的新特性，如圆角边框、阴影效果、渐变背景等，这些都能创建出更加精致...
CSS3 选择器 CSS3 选择器是 CSS 中用来选择 HTML 元素的方式，基本涵盖了 CSS 2 和 CSS 3 的所有规定。下面是 CSS3 选择器的详细知识点： 一、基本选择器 基本选择器是选择 HTML 元素的基本方式。有以下几种： *...
2. **CSS3伪类**：除了`:hover`，还有其他伪类如`:active`和`:focus`，它们分别代表元素被激活（如按下按钮）和获取焦点的状态。在本特效中，`:hover`起到了关键作用，使遮罩层在鼠标悬停时显示。 3. **CSS3过渡...
此外，我们还可以利用 CSS3 的伪类选择器来改变表单元素在不同状态下的样式，如 `:hover`（鼠标悬停）、`:focus`（获得焦点）和 `:active`（被按下）。例如，给按钮添加鼠标悬停时的样式： ```css input[type=...
我们提到的“CSS的API”可能是指CSS规范中的函数或接口，虽然CSS本身并不像JavaScript那样提供完整的编程接口，但CSS Level 2.0引入了一些高级特性，如条件注释（@media）、伪类（:hover、:active、:focus）和伪元素...
CSS3选择器是CSS3规范中...CSS3选择器扩展了CSS的能力，使得开发者能更加灵活和精确地控制页面布局和样式。通过这些选择器，可以针对页面上几乎任何特定的元素进行样式定制，从而创建更加丰富和交互性强的用户体验。
CSS3是CSS的最新版本，引入了更多强大且灵活的选择器，使得网页设计和开发更加精细化。下面我们将详细探讨CSS3选择器的相关知识点。 1. 基本选择器： - **类型选择器**：通过元素名来选择元素，如`p`选择所有的...
3. 伪类和伪元素：`:hover`, `:active`, `:focus`等伪类以及`::before`和`::after`伪元素增加了更多的交互可能。 二、边框与背景 1. 圆角边框：`border-radius`属性可以创建圆角效果，让元素看起来更加平滑。 2. ...
伪类选择符用于定义元素的特殊状态，例如:hover用于选中鼠标悬停状态下的元素，:focus用于选中获得焦点的元素，:active用于选中被激活的元素，如鼠标点击时。它们对于创建动态的用户界面效果非常有用。 CSS选择器的...
1. **选择器增强**：CSS3引入了更强大的选择器，如类选择器（.class）、ID选择器（#id）、属性选择器（[attribute]）和伪类选择器（如:hover、:active、:focus）。此外，还有基于元素位置的选择器，如:nth-child(n)...
### CSS3 基础教程知识点总结 #### 一、前言与背景 《The Book of CSS3》是一本详尽介绍了CSS3技术的指南书籍，由Peter Gasston撰写，旨在帮助开发者掌握这一强大的网页设计工具。本书不仅适用于初学者，也适合...
5. **选择器进阶**：伪类和伪元素的选择器，如:hover、:active、:focus、::before和::after，可以用于实现动态效果和增强用户体验。 6. **CSS预处理器**：Sass、Less和Stylus等CSS预处理器的使用，可以提高CSS代码...
8. **伪类和伪元素**：伪类如`:hover`、`:active`、`:focus`等，用于添加动态效果；伪元素如`::before`、`::after`则可以插入额外内容。 9. **CSS预处理器**：Sass、Less和Stylus等预处理器提供了更强大的语法，如...
伪类（如`:hover`, `:active`, `:focus`）和伪元素（如`::before`, `::after`）在React组件中同样适用，可以用于添加动态效果和装饰性元素。在使用时注意避免与JavaScript事件处理冲突。 8. **CSS变量（Custom ...
1. **选择器增强**：新增了伪类（如:hover、:active、:focus）和伪元素（如::before、::after），以及属性选择器，使样式定位更精确。 2. **多列布局**：通过column-count、column-gap等属性，实现类似报纸多列布局...