CSS ID 选择器

CSS ID 选择器用来选择 HTML 元素的 ID 属性值。因为 HTML 元素的 ID 属性是唯一的（除非人为错误的，赋值了相同的 ID 给多个 HTML 元素），CSS ID 选择器可以唯一的选择一个 HTML 元素，这个与 CSS 标签选择器和 CSS Class 选择器有所不同，后两者可以选择一至多个 HTML 元素。CSS ID 选择器的用途不如标签选择器个 Class 选择器广泛，因为太过专一，导致无法复用，有一种需要使用它的情况，是为了提高 CSS 选择器优先级（特异性），这些我们在后面的章节在介绍。下面我们来看看如何使用 CSS ID 选择器来设置样式。

使用 CSS ID 选择器

假设我们有这样的 HTML 元素：

<ul id="menu">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<ul>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
</ul>

第 1 个 <ul> 标签设置了 ID 值为 menu，如果想使用 CSS ID 选择器来给它设置样式，可以使用下面的 CSS 语法：

#id值

如果要给第 1 个 <ul> 标签设置样式，并且不影响第 2 个 <ul> 元素，可以使用 CSS ID 选择器来专门的选择 #menu，来给它设置样式，代码如下：

#menu {
  border: 1px solid hsl(214, 50%, 60%);
}

预览：

可以看到第 1 个 <ul> 元素的样式成功的修改了，并且也没有影响第 2 个 <ul> 元素的样式。需要注意的是，如果在编写 HTML 的时候，不小心给多个 HTML 元素设置了相同的 ID 属性，那么 CSS ID 选择器会选择所有具有相同 ID 属性的 HTML 元素，这样虽然和 CSS Class 选择器的作用类似，但是这并不符合 HTML 的语法规范，容易引起样式上的 BUG。再有，使用 JavaScript 的 ID 选择器时，也会出现问题，因此，要尽量避免这种情况，错误的示例代码如下：

<ul id="menu">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<ul id="menu">
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
</ul>

预览：

小结

CSS ID 选择器可以选择特定的 HTML 元素，HTML 元素的 ID 值是唯一且不重复的，所以使用 CSS ID 选择器适合给专一的元素设置样式的情况，不过要注意，这时 CSS 代码是无法复用的，因为 ID 属性不能应用在同一个页面的不同 HTML 元素上，另外，要避免在同一个 HTML 页面的元素上，设置相同的 ID 元素，这是违反 HTML 代码规范的，会导致样式上的 BUG。