02-CSS-类选择器

1. 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*类选择器*/
        .zhe{color: red;}
        .zui{font-size: 50px;}

         /*层级选择器*/
         .cengji{width: 200px;height: 100px;background: #00FFFF;}
         .cengji span{color: red;}
         .cengji a{color: gold;}

         /*id选择器*/
         #fan{color: gray;}

         /*组合选择器*/
         .class1,.class2,.class3{width: 200px;height: 120px}
         .class1{background: #008000;}
         .class2{background: #00FFFF;}
         .class3{background: #808080;}

         /*伪类选择器* hover:悬浮/
         .class3:hover{width: 300px;}
    </style>

</head>
<body>

    <div class="zhe">这是一个div</div>

    <p class="zhe zui">最近有什么瓜可以吃</p>

    <span class="ting">听说某明星涉及洗钱,已经进去了</span>

    <div class="cengji">
        <span>这是一个span</span>
        <a href="https:www.baidu.com">百度一下</a>

    </div>

    <p id="fan">你姓饭,名字冷冰冰</p>

    <div class="class1">最近漂亮国有点不老实</div>
    <div class="class2">但是哪有什么用</div>
    <div class="class3">连一个大力办都搞不定</div>

</body>
</html>
posted @ 2022-09-08 13:58  测试圈的彭于晏  阅读(144)  评论(0)    收藏  举报