在CSS中，伪类和伪元素是两种特殊的选择器，它们允许你为元素的特定状态或特定部分应用样式，而不需要额外的类或ID。
伪类用于定义元素的特定状态。它们通常用于链接、表单元素和其他交互式元素。伪类的选择器以冒号 : 开头。
常见的伪类包括：
:hover：当鼠标悬停在元素上时应用样式。:focus：当元素获得焦点时应用样式。:active：当元素被激活（例如，鼠标按下时）应用样式。:visited：当链接已被访问时应用样式。:nth-child()：选择父元素的特定子元素。:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。示例：
/* 鼠标悬停时改变链接颜色 */
a:hover {
color: red;
}
/* 表单输入框获得焦点时改变边框颜色 */
input:focus {
border-color: blue;
}
/* 选择列表中的第一个和最后一个子元素 */
ul > li:first-child {
font-weight: bold;
}
ul > li:last-child {
font-style: italic;
}
伪元素用于选择元素的特定部分，而不是整个元素。它们通常用于装饰或插入内容。伪元素的选择器以双冒号 :: 开头（尽管在CSS2中单冒号 : 也可以使用，但为了区分伪类和伪元素，建议使用双冒号）。
常见的伪元素包括：
::before：在元素的内容之前插入内容。::after：在元素的内容之后插入内容。::first-letter：选择元素的第一个字母。::first-line：选择元素的第一个文本行。::selection：选择用户选择的文本。示例：
/* 在段落内容之前插入引号 */
p::before {
content: "“";
}
p::after {
content: "”";
}
/* 改变选中文本的背景颜色 */
::selection {
background-color: yellow;
}
: 来表示伪元素，但为了遵循CSS规范，建议使用双冒号 ::。通过合理使用伪类和伪元素，你可以更灵活地为网页添加样式和交互效果。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
