Detailed Explanation ng ID Selector ng CSS

ID 选择器允许以一种独立于文档元素的方式来指定样式。

CSS ID 选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则：

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子：

<p id="intro">Ito ay isang paragrapong panimula.</p>

亲自试一试

类选择器还是 ID 选择器？

在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。

区别 1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

#mostImportant {kulay:rosso; background:yellow;}

Ang alituntunin na ito ay magiging pagkakakonekta sa mga sumusunod na mga elemento (ang mga elemento na ito ay hindi puwedeng magkaroon ng magkakaparehong ID sa isang dokumento, dahil sila ay may magkakaparehong ID na halaga):

<h1 id="mostImportant">Ang ito ay mahalaga!
<em id="mostImportant">Ang ito ay mahalaga!
<ul id="mostImportant">Mahalaga ito!</ul>

Subukan nang personal:

Pagkakabisa ng mga titik

Hindi naisaayos ang pagkakabisa ng mga titik, ang class selector at ID selector ay maaaring magkaiba. Ito ay depende sa wika ng dokumento. Ang HTML at XHTML ay nagtatalaga ng pagkakabisa sa mga halaga ng class at ID, kaya ang pagkakabisa ng mga halaga ng class at ID ay dapat tumutugma sa mga halaga ng dokumento.

Kaya, para sa CSS at HTML na ito, ang elemento ay hindi magiging bold:

#intro {font-weight:bold;}
<p id="Intro">Ito ay isang paragrapong panimula.</p>

Dahil sa iba't ibang laki ng titik na 'i' sa may kapistahan at walang kapital, ang selector ay hindi pagtutugma sa mga elemento sa itaas.