类选择器 & ID选择器在网页设计中的差异

除了前面介绍的元素名称，还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则。

其中 class （类）和 id 两个属性具有比较重要的地位。



类选择器

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时，类选择器是以英文句号（.）开头的。

如下面p标签元素具有class属性：

<p class="key">

在一个CSS样式表中，下面的规则会使所有class属性等于key的元素文字颜色为绿色。

.key {

  color:green;

}



ID选择器

通过设置元素的 id 属性为该元素指定ID名。ID名由开发者定义。需要注意的是：每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

例如下面规则会使id等于principal的元素字体大小为20px：

#principal{

         font-size:20px;

}



两者相同点：

可以应用于任何元素



两者不同点：

ID选择器在文档中只使用一次，而类选择器可以使用多次；

例如，下面代码是正确的：

<p class="key">ID选择器在文档中只使用一次</p>

<p class="key">而类选择器可以使用多次</p>

　　而下面代码是不正确的：

<p id="key">ID选择器在文档中只使用一次</p>

<p id="key">而类选择器可以使用多次</p>

可以为同一个元素使用多个类选择器的方式实现其多个样式，但是ID选择器不可以。

例如，下面代码是正确的：

<p class="key principal">可以为同一个元素使用多个类选择器的方式实现其多个样式，但是ＩＤ选择器不可以。</p>

　　而下面代码不正确：

<p id="key principal">可以为同一个元素使用多个类选择器的方式实现其多个样式，但是ＩＤ选择器不可以。</p>

类选择器 属性 元素 选择器 样式表 类名 文档 代码 不可以 样式

上一篇：有了box-shadow，就不用再用PS做图片阴影了

下一篇：返回列表