web前端入门到实战：HTML的id选择器&类选择器

最新推荐文章于 2025-11-27 20:19:11 发布

原创

最新推荐文章于 2025-11-27 20:19:11 发布 · 802 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #web前端 #前端开发 #html教程

本文介绍了HTML的id选择器和类选择器，用于解决标签选择器的局限性，实现更精确的样式定制。id选择器具有唯一性，常用于JavaScript操作，而类选择器则允许重复使用，适合于设置样式。两者命名规则相似，但使用场景不同，类选择器在HTML中可以绑定多个。

一、问题：我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式，这对于我们个性化定制产生了阻碍，因此我们便引出了id选择器，来进行特别指定进行配置样式

二、id选择器

1.定义：根据指定的id名称找到对应的标签，然后设置属性

2.格式：

#id名称｛

    属性：值；

｝

3.例如：

<style>

        p{

            color: rgb(255,45,45);

        }

        #label1{

            color:black;

        }

        #label2{

            color: #37fa1e;

        }

        #label3{

            color: blue;

        }

        #label4{

            color:green;

        }

</style>

</head>

<body>

<b id="label1"></b>

<p id="label2">迟到毁一生</p>

<p id="label3">早退穷三代</p>

<p id="label4">按时上下班</p>

<p id="label5">必成高富帅</p>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

4.注意：

（1）每个HTML标签中都

最低0.47元/天解锁文章