在 CSS 语法那一页中, 我们有提到，Class 及 ID 都是使用者设定的选择器 (selector)。以下分别介绍：
Class
Class 的语法，是先放一个句点 (.)，之后再列出选择器名称。设定一个 Class 选择器的语法如下：
.【Class 名称】{
属性：设定值；
...
}举例来说，
.navbar {
color:#0000FF;
}要将以上的样式套用在 HTML 内，我们用以下的 HTML 码：
<p class="navbar">这是用 Class 选择器的例子。</p>
以上的 HTML 码会显现出：
这是用 Class 选择器的例子。
一个 Class 选择器可以同时有好几个不同的物件 (instance)。这是靠以下的语法：
【型类选择器】.【选择器名称】{
属性：设定值；
...
}举例来说，若有以下的 CSS 代码，
b.special {
color:#0000FF;
}
i.special {
color:#FF0000;
}以下的 HTML 代码，
这个例子显示出 <b class="special">同一个选择器</b>可以<i class="special">有不同的 instance。</i>.
css效果
这个例子显示出同一个选择器可以有不同的 instance。.
多重 Class
我们也可以同时套用数个 class。举例来说，若我们有以下的 CSS 代码
.applylarge {
font-size:20px;
}
.applyred {
color:#FF0000;
}那以下的 HTML代 码，
<p class="applylarge applyred">这是多重 Class 的例子。</p>
效果如下
这是多重 Class 的例子。
ID
ID 的语 法，是先放一个井字号 (#)，之后再列出选择器名称。设定一个 ID 选择器的语法如下：
#【ID 名称】{
属性：设定值；
...
}举例来说，
#footer {
color:#FF00FF;
}要将以上的样式套用在 HTML 内，我们用以下的 HTML 码：
<p id="footer">这是用 ID 选择器的例子。</p>
显现出的结果为，
这是用 ID 选择器的例子。
Class 跟 ID 的比较
这两者最大的不同，是在于 ID 选择器在一个 HTML 文件中只能被使用一次，而 Class 选择器在一个 HTML 文件中可以被使用多次。第二个不同的地方，是 ID 选择器可以被 Javascript 中的 GetElementByID 函数所运用，而 Class 选择器无法被 Javascript 运用到。
并没有什么固定的规则，来决定什么时候要用 ID 及什么时候要用 Class。我们的建议是尽量用 Class，因为这样子最灵活 (同一个 HTML 文件可以利用这类的选择器多次)。唯一的例外，是当你要用 Javascript 的 GetElementByID 函数时。在这个情况下，你就应该要用 ID。
Class 名称及 ID 名称都是对大小写敏感的。举例来说，.classone 及 .ClassOne 是代表两个不同的 Class 选择器。
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程