CSS Id 和 Class选择器

CSS IdClass


id 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。


id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

#para1
{
text-align:center;
color:red;
}
尝试一下 »

Remark ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

Remark ID属性只能在每个 HTML 文档中出现一次。具体的解释,请参阅 XHTML:网站重构


class 选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

实例

.center {text-align:center;}
尝试一下 »

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center {text-align:center;}
尝试一下 »

Remark 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

扩展阅读

在 HTML 标签中设置 CSS 样式时,有多种 CSS 选择器可供选择,你可以参考本站的CSS3选择器归类整理(包含了CSS3中新增的选择器)来了解更多有关CSS选择器的内容。

分类CSS教程文档相关推荐:

CSS 教程导读目录 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS 背景(Backgrounds) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表样式(ul) CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓(outline)属性 CSS Margin(外边距) CSS Padding(填充) CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) 与 Visibility(可见性) CSS Positioning(定位) CSS Float(浮动) CSS 水平对齐(Horizontal Align) CSS 组合选择符 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 总结 无标题文章