HTML入门（CSS伪类）————DAY4

最新推荐文章于 2022-01-01 22:24:13 发布

好吃的都给你呀

最新推荐文章于 2022-01-01 22:24:13 发布

阅读量118

点赞数

分类专栏：前端杂文文章标签： HTML 伪类 CSS

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102578934

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>
</head>
<style>
    /* css伪类:当元素处于某种特殊情况下时，或者元素的某一部分所触发的类 */

    /* 伪类格式： 选择器:为类名 */

    

    /* 只有应用于那些可以进行交互的目标上，比如 链接 按钮等 */
    input:focus {
        transform: rotate(39deg);
        transition: transform 3s linear;

    }


    button:focus {
        transform: rotate(39deg);
        transition: transform 3s linear;

    }
    /* hover,鼠标指针悬停在元素上时所触发的伪类 */
    img:hover {
        transform:rotate(30deg) scale(1.2,1.2);
    }
    /* 前缀，不可被选中 相应的有后缀 after */
    #d:before{
        content: "路飞";
        font-size: 30px;
        color: aquamarine;
    }
</style>

<body>
    <input type="text">
    <table>
        <tr>
            <td>adf</td>
            <td>sdf</td>
            <td>sdf</td>
        </tr>
        <tr>
        <tr>asdf</tr>
        <tr>sdf</tr>
        <tr>sadf</tr>

        </tr>
    </table>
    <button>你好</button>
    <a href="http://www.baidu.com">百度一下</a>
    <p id="d">草帽</p>
    <img id="a" src="../前端/img图片库/1.jpg" alt="">
    <p>草帽</p>
    <img id="b" src="../前端/img图片库/2.jpg" alt="">
    <p>草帽</p>
    <img id="c" src="../前端/img图片库/3.jpg" alt="">


</body>

</html>

好吃的都给你呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门（CSS伪类）————DAY4

<!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...
复制链接

扫一扫

专栏目录