除了前面介绍的元素名称,还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则。
其中 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做图片阴影了
下一篇:返回列表