在CSS中,我们经常会用到伪类,伪类是一种可以在元素的状态之外添加样式的方法,它可以是元素被用户交互后的状态、文档的结构位置、以及其他状态。
/*例子1*/ a:link { color: blue; } a:visited { color: purple; } /*例子2*/ input:focus { outline: none; } input:valid { border: 1px solid green; }
上面的两个例子中,第一个例子中的:link和:visited分别表示标签的未点击和已点击状态,它们对应样式的颜色不同;第二个例子中的:focus和:valid则表示输入框聚焦状态和输入正确状态,它们可以帮助用户更好地使用表单。
除了常见的:link、:visited、:focus和:valid之外,还有其他一些常用的伪类,如:hover(鼠标悬浮)、:active(鼠标点击)、:first-child(第一个子元素)、:last-child(最后一个子元素)等。
/*例子3*/ button:hover { background-color: #ff7f50; } /*例子4*/ li:first-child { font-weight: bold; } li:last-child { color: gray; }
例子3中,button:hover表示按钮鼠标悬浮时的样式;例子4中,li:first-child和li:last-child分别表示列表的第一个和最后一个项的样式。
总之,伪类可以帮助我们更好地控制样式,让网页变得更加美观,同时也能增强用户体验。