W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> /* 设置 id 为 "myHeader" 的元素的样式 */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* 设置类名为 "city" 的所有元素的样式 */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h1>Class 与 ID 的差异</h1> <p>一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：</p> <!-- 拥有唯一 id 的元素 --> <h1 id="myHeader">我的城市</h1> <!-- 拥有相同类名的多个元素 --> <h2 class="city">上海</h2> <p>中国最大的经济城市。</p> <h2 class="city">深圳</h2> <p>中国最具创新力的城市。</p> <h2 class="city">北京</h2> <p>中国的首都。</p> </body> </html>