CSS Id 和 Class选择器

主题

id 和 class 选择器

在 HTML 开发里，若需为 HTML 元素指定 CSS 样式，通常借助在元素中设置id和class选择器来实现。

id选择器为每个特定元素赋予独一无二的标识，class选择器则可将相同样式批量应用到多个元素上。

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

HTML 元素以id属性来设置id选择器时，CSS 中id选择器需要以#来定义。

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

实例代码运行代码

复制

#paragraph{
    text-align:center;
    color:red;
}

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

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

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

在以下的例子中，所有拥有center>类的 HTML 元素均为居中：

实例代码运行代码

复制

.center {text-align:center;}

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

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

实例代码运行代码

复制

p.center {text-align:center;}

多个class选择器可以使用空格分开：

实例代码运行代码

复制

.center { text-align:center; }
.color { color:#ff0000; }
<p class="center color">这是一个红色居中的文本</p>

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

CSS 语法 CSS 使用

评论区 0

发表评论

教程介绍

CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。

36 章节

213 阅读

0 评论