三种基本选择器

最新推荐文章于 2024-07-11 18:05:14 发布

原创最新推荐文章于 2024-07-11 18:05:14 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

web基础专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了CSS中三种主要选择器的使用方法：标签选择器、类选择器和ID选择器，并通过具体代码实例展示了每种选择器如何应用于HTML元素，以实现不同的样式效果。


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

    <style>

        /*1.标签选择器: 会选择所有的div标签*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }

        /*2.类选择器：*/
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 1px solid black;
        }

        /*3.id选择器*/
        #box02{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid black;
        }


    </style>

</head>
<body>



<div>11111</div>

<div class="box">22222</div>

<div id="box02">22222</div>




</body>
</html>