CSS伪类是什么？

CSS伪类是指语法上并不存在的一个选择器，它是为了给某些特定状态的元素应用样式而出现的。在HTML中，伪类的语法是以一个冒号（:）来表示的。

以下是CSS中常用的伪类：

:hover 伪类

当鼠标滑过一个元素时，会触发该元素的:hover伪类，我们可以设置hover伪类来改变元素的样式。

<style>
    a:hover{color: red;}
</style>

:active 伪类

当鼠标点击一个元素时，会触发该元素的:active伪类，我们可以设置active伪类来改变元素的样式。

<style>
    a:active{color: green;}
</style>

:focus 伪类

当元素获得焦点时，会触发该元素的:focus伪类，我们可以设置focus伪类来改变元素的样式。

<style>
    input:focus{border: 2px solid blue;}
</style>

:visited 伪类

当链接被访问过时，会应用visited伪类来改变链接的样式。

<style>
    a:visited{color: purple;}
</style>

:first-child 伪类

当一个元素是它父元素的第一个子元素时，应用该元素的:first-child伪类。

<style>
    ul li:first-child{font-weight: bold;}
</style>

:last-child 伪类

当一个元素是它父元素的最后一个子元素时，应用该元素的:last-child伪类。

<style>
    ul li:last-child{font-style: italic;}
</style>

:nth-child 伪类

当一个元素是它父元素的第n个子元素时，应用该元素的:nth-child伪类，可以使用公式an+b来确定匹配的元素，例如:nth-child(3n+1)表示每隔2个元素匹配一个。

<style>
    ul li:nth-child(3n+1){color: blue;}
</style>

:nth-of-type 伪类

与:nth-child类似，:nth-of-type也可以设置每个类型的第n个元素，但:nth-of-type只计算相同元素类型的个数。

<style>
    p:nth-of-type(2){color: red;}
</style>

:not 伪类

:not可以用来排除某些元素，如果要排除某个元素，只需在:not中添加该元素即可。

<style>
    input:not([type=checkbox]){color: green;}
</style>

:checked 伪类

当一个表单元素被选择时，会应用:checked伪类来改变元素的样式。

<style>
    input[type=radio]:checked{background-color: blue;}
    input[type=checkbox]:checked{opacity: 0.5;}
</style>

以上就是常用的CSS伪类，可以根据不同的需求来设置不同的样式，同时也可以结合使用不同的伪类来实现更复杂的效果。

阅读剩余 52%