CSS Id 和 Class选择器

CSS 中除了直接按标签名设置样式，更常用的是给元素起"名字"，再用 id 或 class 选择器精确定位。id 用来标记页面中的唯一元素，class 用来给一批相似元素分组。两者写法只差一个前缀符号，但用途和优先级并不相同。

id 选择器

id 选择器以 # 开头，后跟元素的 id 值。id 在同一页面中只能出现一次，适合定位导航栏、页脚等独一无二的区块：

#nav {
    background-color: #333;
    color: white;
}

<div id="nav">网站导航栏</div>

效果说明：只有 id 值为 nav 的这一个元素会获得深色背景和白字。

class 选择器

class 选择器以 .（点号）开头。与 id 不同，同一个 class 可以在页面中被多个元素重复使用，非常适合给同类元素统一风格：

.item {
    border: 1px solid #ccc;
    padding: 8px;
}

<p class="item">第一条内容</p>
<p class="item">第二条内容</p>

效果说明：两个带 class="item" 的段落都获得边框和内边距，样式无需重复书写。

id 与 class 的区别

对比项	id 选择器	class 选择器
前缀	#	.
唯一性	页面内唯一	可重复使用
优先级	较高	较低
典型用途	唯一区块、JS 定位	分组统一样式

CSS 中 id 选择器的优先级高于 class 选择器：当两者同时作用于同一元素且样式冲突时，以 id 的样式为准。

配合标签名使用

id 和 class 选择器都可以与标签名组合，缩小匹配范围，只命中特定标签：

p.item { color: green; }      /* 只选 class 为 item 的 <p> */
div#box { border: 1px solid; } /* 只选 id 为 box 的 <div> */

<p class="item">绿色文字</p>
<span class="item">不受影响</span>

效果说明：p.item 不会选中 class 同为 item 的 span 或其他标签，匹配更精确。

一个元素同时拥有多个 class

class 值可以是空格分隔的多个名字，从而叠加多套样式：

.text-red  { color: red; }
.text-bold { font-weight: bold; }

<p class="text-red text-bold">既红又粗的文字</p>

效果说明：元素同时获得两套 class 的样式；若样式冲突，后定义的 class 覆盖先定义的。

小结

id 用 # 表示、页面内唯一、优先级高；class 用 . 表示、可复用、负责批量分组。实际开发中优先使用 class 提高复用性，仅在需要唯一标识时使用 id。