CSS #id 选择器

实例

为 id="w3cschool01" 的元素设置样式：

#w3cschool01
{ 
background-color:red;
}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 ​#id​ 选择器。

定义与用法

#id 选择器用于为带有特定 id 属性的 HTML 元素设置样式。id 在文档中应唯一。

语法

#id {
  property: value;
}

示例

为 id="header" 的元素设置背景颜色：

#header {
  background-color: red;
}

优先级

#id 选择器优先级高于类选择器和元素选择器，低于内联样式。

示例

.class {
  color: blue;
}

#id {
  color: red;
}

#id 的优先级更高，文本颜色为红色。

最佳实践

• 避免滥用 #id 选择器，优先使用类选择器以提高代码灵活性。
• 在大型项目中减少对 #id 的依赖，提升代码可维护性。

常见问题与注意事项

• 获取元素：使用 document.getElementById('id')。
• 样式冲突：使用更具体的选择器或调整加载顺序解决。
• 性能优化：#id 选择器在 CSS 和 JavaScript 中性能较高。

总结

#id 选择器功能强大，但应谨慎使用。遵循最佳实践可编写出高效、可维护的代码。