伪类选择器

Java晓姐姐

已于 2023-06-28 15:49:35 修改

阅读量445

点赞数

分类专栏：前端文章标签： css html 前端

于 2022-08-15 17:47:50 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60323584/article/details/126351264

版权

前端专栏收录该内容

10 篇文章

订阅专栏

一.静态伪类 (只能用于超链接的样式)

1.:link超链接点击之前

2.:visited连接被访问过之后

二.动态伪类 (针对所有标签都适用的样式)

`1.:hover` “悬停”：鼠标放到标签上的时候

`2.:active` “激活”：鼠标点击标签，但是不松手时。

`3.:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）注意：标签需要加上tabindex=“1”才有效

三.其他伪类选择

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他伪类选择</title>
    <style>
        li:first-child{color: green;}    //第一个
        li:nth-child(2){color: mediumvioletred;}    //第二个
        :nth-child(odd)    //第奇数个
        :nth-child(even)    //第偶数个
    </style>
</head>
<body>
    <ui>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ui>
</body>
</html>