伪类
CSS 伪类是用于选择文档中处于特定状态的元素的一种选择器类型。它们并不是真正的类,因为它们不能在HTML或XML文档中直接定义,而是通过CSS来声明。伪类的名称前通常有一个冒号(:)。
作用
那么在什么情况下,会用到伪类呢?伪类主要用于以下几种情况:
- 响应用户交互:例如,
:hover
、:active
和:focus
可以用于改变元素在鼠标悬停、被激活(如点击或按下)或获取键盘焦点时的外观。 - 基于状态的样式:
:visited
可用于改变已被访问的链接的颜色,:checked
可用于选定的表单控件。 - 结构化选择:
:first-child
、:last-child
、:nth-child(n)
等可以用于选择文档树中符合特定位置条件的元素。 - 通用排除:
:not(selector)
可用于排除符合特定选择器的元素。
种类
相较于伪元素,伪类的种类型比较丰富,常用的伪类大概有这些:
- UI伪类(User Interface Pseudo-classes)
:hover
- 当用户将鼠标悬停在元素上时激活。:active
- 当元素被用户激活,例如在鼠标按钮被按下时。:focus
- 当元素获得焦点时,通常发生在键盘导航中。:focus-within
- 当元素或其后代元素获得焦点时。:target
- 当元素是URL片段标识符的目标时。
- 结构性伪类(Structural Pseudo-classes)
:first-child
- 选择作为其父元素的第一个子元素的元素。:last-child
- 选择作为其父元素的最后一个子元素的元素。:only-child
- 选择作为其父元素唯一子元素的元素。:nth-child(n)
- 选择作为其父元素的第n个子元素的元素。:nth-last-child(n)
- 选择作为其父元素的倒数第n个子元素的元素。:not(selector)
- 选择不是由给定选择器匹配的元素。:empty
- 选择没有子节点的元素。:root
- 选择文档的根元素,通常是<html>
元素。
- 动态伪类(Dynamic Pseudo-classes)
:checked
- 选择被选中的<input type="checkbox">
或<input type="radio">
元素。:enabled
- 选择可用(未禁用)的表单控件。:disabled
- 选择被禁用的表单控件。:indeterminate
- 选择不确定状态的元素,如部分选中的复选框组。:valid
和:invalid
- 分别选择有效和无效的表单控件。
- 用户行为伪类(User Action Pseudo-classes)
:link
- 选择未访问过的链接。:visited
- 选择已被用户访问过的链接。:any(link, visited)
- 选择所有链接,无论是否被访问过。
- 其他伪类
:scope
- 选择当前样式作用域内的元素。:dir(ltr|rtl)
- 选择具有特定书写方向的元素。
这些伪类可以帮助你根据元素的上下文、状态或用户操作来改变样式,使得CSS更加灵活和动态。使用伪类可以让你无需修改HTML结构即可实现复杂的样式规则。
使用示例
下面是几个简单的示例,以方便具体的理解一下伪类:
/* 当鼠标悬停在链接上时,更改链接颜色 */
a:hover {
color: red;
}
/* 更改已被访问链接的颜色 */
a:visited {
color: purple;
}
/* 当输入框获取焦点时,更改边框颜色 */
input:focus {
border-color: blue;
}
/* 选择列表中偶数项的项目 */
li:nth-child(even) {
background-color: #f2f2f2;
}
伪元素
CSS 伪元素是在CSS中使用的一种特殊类型的选择器,用于生成非实际DOM树中存在的内容或者对元素的某些特定部分进行样式化。伪元素允许你向页面添加额外的、不可见的结构,或者在元素前后插入内容。它们不会影响文档的实际结构,仅用于样式目的。在CSS3中,伪元素使用双冒号 (::) 来区分它们与伪类。
作用
其实伪元素理解起并不复杂,并且在某些情况下,还特别好有,比如:
- 装饰性效果:可以通过伪元素在元素前后插入图标、线条、装饰图形等。
- 布局辅助:伪元素可以用来帮助实现特定的布局,例如清除浮动、创建三角形箭头等。
- 交互效果:可以利用伪元素实现一些动态效果,如悬停时显示额外信息。
- 文本格式化:使用
::first-letter
和::first-line
对文本的首字母或首行进行特殊样式处理。 - 减少HTML冗余:避免为了装饰目的而在HTML中添加不必要的元素。
种类
除此之外,伪元素的种类也不是很多,经常会用到的大概有6种:
::before
- 在元素的内容之前插入内容。::after
- 在元素的内容之后插入内容。::first-line
- 对元素的第一行文本进行样式化。::first-letter
- 对元素的第一个字符进行样式化。::selection
- 对用户选中的文本进行样式化。::placeholder
- 对输入元素的占位符文本进行样式化。
使用示例
假设我们想要在每个段落的开头添加一个小图标作为装饰:
p::before {
content: "â– "; /* Unicode for a small bullet */
color: red; /* Style the bullet */
}
伪元素与伪类的区别:
- 伪元素(如
::before
和::after
)用于向文档流中插入内容,它们不对应于任何实际的DOM元素,但可以像普通元素一样接受样式。 - 伪类则用于选择已经存在的元素并根据其状态应用样式。
实战应用
伪类
1. 鼠标悬停效果
你可以使用 :hover
伪类来改变元素在鼠标悬停时的样式,比如改变链接的颜色或添加阴影效果。
a:hover {
color: #ff0000;
text-decoration: underline;
}
.button:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
2. 活动状态的按钮
:active
伪类可以用于改变按钮在被按下时的样式。
.button:active {
background-color: #ccc;
}
3. 已访问链接的样式
:visited
伪类允许你改变已访问链接的颜色。
a:visited {
color: purple;
}
4. 获取焦点的输入框
:focus
伪类可以用于突出显示获取了键盘焦点的元素,这对于无障碍设计非常重要。
input:focus {
outline: 2px solid blue;
}
5. 表单验证
:valid
和 :invalid
伪类可以用于在表单验证失败或成功时改变输入框的样式。
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
6. 列表项的间隔样式
:nth-child(n)
伪类可以用于选择列表中的每n个元素,并应用不同的样式。
ul li:nth-child(odd) {
background-color: #eee;
}
7. 第一个子元素的样式
:first-child
伪类可以用于选择父元素的第一个子元素,这在调整列表或文章段落的样式时很有用。
p:first-child {
font-weight: bold;
}
8. 最后一个子元素的样式
:last-child
伪类可以用于选择父元素的最后一个子元素。
ul li:last-child {
margin-bottom: 0;
}
9. 仅有的子元素的样式
:only-child
伪类可以用于选择那些是其父元素唯一子元素的元素。
div:only-child {
margin: auto;
}
10. 交互式导航菜单
:hover
和 :focus
可以结合使用创建响应式导航菜单,比如下拉菜单。
.nav ul {
display: none;
}
.nav:hover ul,
.nav:focus-within ul {
display: block;
}
伪元素
1. 清除浮动
使用 ::after
伪元素和 clear:both
来创建一个自清浮动的容器。
.container::after {
content: "";
display: table;
clear: both;
}
2. 插入图标或装饰
在元素前或后插入图标,例如在链接前添加一个箭头图标。
a::before {
content: "\2192";
margin-right: 5px;
}
3. 创建列表项的点或数字
使用 ::before
或 ::after
来生成列表项的符号,替代默认的列表样式。
ul li::before {
content: "✓";
color: green;
margin-right: 10px;
}
4. 三角形箭头
利用伪元素创建三角形箭头,常用于弹出菜单或提示框。
.popup::before {
content: "";
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
5. 自定义列表样式
使用伪元素来自定义列表项的样式,比如使用自定义的图像作为列表项的标记。
ol.custom::before {
content: url('image.png');
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
6. 首字母大写
使用 ::first-letter
来突出显示段落或标题的首字母。
h1::first-letter {
font-size: 2em;
float: left;
margin-right: 5px;
}
7. 文本阴影或背景
使用伪元素来创建文字背景或阴影效果,尤其在小屏幕上,可以提供更好的可读性。
h1::after {
content: attr(data-text);
position: absolute;
z-index: -1;
color: rgba(0,0,0,0.7);
text-shadow: 2px 2px 0 #000;
}
8. 文本高亮
当用户选择文本时,使用 ::selection
来改变选中文本的样式。
::selection {
background: yellow;
color: black;
}
9. 占位符效果
使用伪元素来模仿输入框的占位符效果。
input::placeholder {
color: grey;
}
10. 自定义进度条
使用伪元素来创建一个自定义样式的进度条,可以通过动画或数据属性来控制填充程度。
.progress-bar::before {
content: "";
display: block;
width: 50%; /* 控制进度条的长度 */
height: 100%;
background: #4CAF50;
}