新年好！能否用单个ID选择器为多个HTML标签设置样式？

嗨！这个问题问得特别到位，很多刚接触CSS和HTML的同学都会遇到这个“看似矛盾”的情况，我来给你拆解清楚：

为什么你的代码能生效？ #

浏览器为了兼容早期不规范的网页，做了容错处理——它并不会严格校验ID的唯一性。当你用#link这个ID选择器时，浏览器会匹配所有带有id="link"的元素，把样式直接应用上去。这是浏览器在“妥协”，但这不代表这种写法是正确的。

HTML规范的核心要求 #

根据HTML官方标准，id属性在整个HTML文档中必须是唯一的，一个ID只能绑定到一个元素上。违反这个规范会带来不少潜在问题：

• JavaScript里的document.getElementById()方法只会返回第一个匹配到的元素，如果你想通过JS操作所有这些红色链接，就会出现无法选中后续元素的问题；
• 屏幕阅读器等辅助技术会依赖唯一ID来识别元素，重复ID会降低网页的可访问性；
• 代码的可维护性变差，其他开发者看到重复ID会产生困惑，后续修改样式也容易引发意想不到的冲突。

正确的实现方式 #

如果多个元素需要共享相同的样式，应该使用类选择器（Class Selector），这也是类选择器设计的初衷。把你的代码修改成这样就符合规范了：

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        .link { color: red; }
    </style>
</head>
<body>
    <a href="" class="link">RED</a>
    <a href="" class="link">RED</a>
    <a href="" class="link">RED</a>
    <a href="" class="link">RED</a>
</body>
</html>

简单来说：ID是用来标识唯一元素的（比如页面的头部、某个特定的弹窗），而类是用来给一组元素设置相同样式或行为的。

内容的提问来源于stack exchange，提问作者khalid J-A