15900627980

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

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

其中 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">可以为同一个元素使用多个类选择器的方式实现其多个样式,但是ID选择器不可以。</p>

  而下面代码不正确:

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

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

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

下一篇:Lang属性及Head元素嵌套元素

相关内容 观察行业视觉,用专业的角度,讲出你们的心声。
Back

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2020 沪ICP备20008988号-2