伪类是CSS的重要概念,用于匹配在特定状态下的HTML元素。比如,当用户将鼠标悬停在链接上时,我们可以使用:hover伪类来改变链接的颜色。
a:hover { color: red; }
伪类定义时需要在CSS选择器后加上冒号和伪类名称。伪类可以分为以下几种:
- 链接伪类: 匹配不同状态下的链接,如:link/:visited/:hover/:active。
a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: green; }
ul li:first-child { color: red; } ul li:last-child { color: green; } ul li:nth-child(2) { color: blue; }
input[type="checkbox"]:checked { background-color: red; } input[type="text"]:disabled { background-color: gray; } input[type="submit"]:enabled { background-color: blue; } input[type="text"]:focus { outline-color: green; }
@media screen and (max-width: 768px) { body { font-size: 14px; } } @media screen and (min-width: 768px) and (max-width: 992px) { body { font-size: 16px; } } @media screen and (min-width: 992px) { body { font-size: 18px; } }
以上是CSS伪类的定义方法和不同种类的伪类介绍。合理使用伪类可以帮助我们更好地掌控样式,提高网页的可维护性。