首页 >
css伪选择器教程 |csslable
CSS 伪选择器教程
CSS 伪选择器是指选择文档树中的一类元素，这些元素没有被包括在文档源码中，因此也不能用普通的 CSS 选择器来选择它们。伪选择器的语法以 “:” 开头，一般在选择器最后一个位置出现。以下是一些常用的 CSS 伪选择器和它们的用途。
:hover 伪类
:hover 伪类用于当鼠标悬停在元素上时改变其样式。例如，下面的代码用于将所有链接的颜色在鼠标悬停时改变为红色：
pre {
background-color: #f5f5f5;
padding: 10px;
}
a:hover {
color: red;
}
:not 伪类
:not 伪类用于选择除了指定元素以外的所有元素。例如，下面的代码用于给所有 p 元素添加样式，但是不包括某个具有特定类名的 p 元素：
p:not(.no-border) {
border: 1px solid black;
}
:first-child 伪类
:first-child 伪类用于选择父元素下的第一个子元素。例如，下面的代码用于将所有父元素下的第一个子元素的颜色改变为红色：
pre:first-child {
color: red;
}
:after 伪元素
:after 伪元素用于在文档中的某个位置插入内容。例如，下面的代码用于在所有 h1 元素后面插入一些文本：
h1:after {
content: ” – The End”;
}
以上是常用的 CSS 伪选择器，使用它们可以使页面样式更灵活、多样化。需要注意的是，一些伪选择器不兼容老版本的浏览器，因此需要对其进行特殊处理。