css伪类的使用

灰太狼 2023-07-03 03:18 19阅读 0赞

CSS 伪类用于向某些选择器添加特殊的效果。

### :active ###

点按，向被激活的元素添加样式

### :focus ###

焦点输入，向拥有键盘输入焦点的元素添加样式

### :link ###

当鼠标悬浮在元素上方时，向元素添加样式

### :visited ###

链接已访问，向已访问的链接添加样式

### css3新增的一对元素操作伪类 ###

*  :first-child
 *  last-child
 *  … 参考文档

### 效果 ###

![image.png][]

### demo代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>css 伪类</title>
        <style> .btn{ width: 80px; height: 36px; background-image: linear-gradient(#3296fa, red); color: #fff; font-size: 13px; text-align: center; line-height: 36px; border-radius: 4px; } .btn:hover{ cursor: pointer; } .btn:active{ background-image: linear-gradient(to right, #3296fa, red); } .input{ width: 300px; height: 36px; margin: 15px 0; } input{ width: 100%; height: 100%; outline: none; border-radius: 4px; border: 1px solid #ccc; padding: 0 15px; color: #333; font-size: 13px; } input:focus{ /* background-image: linear-gradient(to right, #3296fa, red, yellow); */ border-color: green; } .href{ margin: 15px 0; } a:hover{ color: green; } a:link{ background: #ccc; } a:visited{ color: red; } ul{ padding: 0; margin: 15px 0; list-style: none; } li{ width: 300px; height: 36px; margin-bottom: 15px; background-image: linear-gradient(to right, #3296fa, yellow); } li:first-child{ background-image: linear-gradient(#3296fa, red); } li:last-child{ background-image: linear-gradient(red, #3296fa); } </style>
    </head>
    <body>
        <pre>
            :active
            点按，向被激活的元素添加样式
            :focus
            焦点输入，向拥有键盘输入焦点的元素添加样式
            :hover
            当鼠标悬浮在元素上方时，向元素添加样式
            :link
            链接未访问，向未被访问的链接添加样式
            :visited
            链接已访问，向已访问的链接添加样式
            还有css3新增的一对元素操作伪类
            :first-child
            :last-child
            ....
        </pre>
    
        <div class="btn">Button</div>
    
        <div class="input">
            <input type="text">
        </div>
    
        <div class="href">
            <a href="https://blog.csdn.net/YuShiYue/article/details/103914030" target="_open">
                https://blog.csdn.net/YuShiYue/article/details/103914030
            </a>
        </div>
    
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    </html>

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMjM5NTA0LzE1ODA1NDAyNDM4NzItYzE2NmEyZmItZDE4NC00NDgzLTkyYzItMjViNDk0NGE2ZmIzLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=726&name=image.png&originHeight=726&originWidth=1008&size=42282&status=done&style=none&width=1008