CSS伪类是指语法上并不存在的一个选择器,它是为了给某些特定状态的元素应用样式而出现的。在HTML中,伪类的语法是以一个冒号(:)来表示的。
以下是CSS中常用的伪类:
当鼠标滑过一个元素时,会触发该元素的:hover伪类,我们可以设置hover伪类来改变元素的样式。
<style>
a:hover{color: red;}
</style>
当鼠标点击一个元素时,会触发该元素的:active伪类,我们可以设置active伪类来改变元素的样式。
<style>
a:active{color: green;}
</style>
当元素获得焦点时,会触发该元素的:focus伪类,我们可以设置focus伪类来改变元素的样式。
<style>
input:focus{border: 2px solid blue;}
</style>
当链接被访问过时,会应用visited伪类来改变链接的样式。
<style>
a:visited{color: purple;}
</style>
当一个元素是它父元素的第一个子元素时,应用该元素的:first-child伪类。
<style>
ul li:first-child{font-weight: bold;}
</style>
当一个元素是它父元素的最后一个子元素时,应用该元素的:last-child伪类。
<style>
ul li:last-child{font-style: italic;}
</style>
当一个元素是它父元素的第n个子元素时,应用该元素的:nth-child伪类,可以使用公式an+b来确定匹配的元素,例如:nth-child(3n+1)表示每隔2个元素匹配一个。
<style>
ul li:nth-child(3n+1){color: blue;}
</style>
与:nth-child类似,:nth-of-type也可以设置每个类型的第n个元素,但:nth-of-type只计算相同元素类型的个数。
<style>
p:nth-of-type(2){color: red;}
</style>
:not可以用来排除某些元素,如果要排除某个元素,只需在:not中添加该元素即可。
<style>
input:not([type=checkbox]){color: green;}
</style>
当一个表单元素被选择时,会应用:checked伪类来改变元素的样式。
<style>
input[type=radio]:checked{background-color: blue;}
input[type=checkbox]:checked{opacity: 0.5;}
</style>
以上就是常用的CSS伪类,可以根据不同的需求来设置不同的样式,同时也可以结合使用不同的伪类来实现更复杂的效果。
本文链接:http://task.lmcjl.com/news/15945.html