CSS 支持伪类和伪元素来指定文档中不同状态下的样式。伪类表示当前状态下元素的特定样式,伪元素表示非真实存在的元素。以下是一些常用的伪类/伪元素:
- :link 表示未访问链接的状态。
- :visited 表示已访问链接的状态。
- :hover 表示鼠标悬停时的状态。
- :active 表示正在被激活的状态。
- :focus 表示获得焦点的状态。
- :first-child 选择了文档中第一个子元素。
- :last-child 选择了文档中最后一个子元素。
- ::before 伪元素可以插入元素之前的内容。
- ::after 伪元素可以插入元素之后的内容。
以下是一个简单的示例:
a:link {
color: blue;}
a:visited {
color: purple;}
a:hover {
color: green;}
a:active {
color: yellow;}
div::before {
content:"Hello"; color: blue;}
div::after {
content:"World";}
在这个示例中,当鼠标悬停在链接上时,链接颜色会变为绿色,而 div 元素前后的文本会被显示为 "Hello World"。这些示例展示了 CSS 伪类和伪元素的功能,可以帮助您为文档的不同状态指定特殊的样式。