关于css中id与class的使用区别

在html网页建设中我们都是使用css样式表来给网页进行布局和设计，相信大家在网页设计中进行遇到id和class，这两个都是css中的选择器，那么这两个有什么区别呢，下面我们一起来了解下。

css中id与class区别介绍

1、两者的使用范围不同

Class选择器的属性允许向一组在class属性上具有相同值的元素应用声明。

例子：

Css：.wenben{font-size:14px}

html: <p class=”wenben”>字号大小14px<p>

只要是标签中有class说明，则这些标签的里面的文本字号都是14px，或者单独对某一种标签做样式，则后面出现相同标签时都是这个样式。

例子：

Css：p{font-size:14px}

html: <p >字号大小14px<p>

这个样式中网页的p标签里的文本都是14px大小，也就是网页里面body内的所有元素都有CLASS属性。

ID选择器的属性的操作类似于CLASS属性，单ID属性的值在整个页面文档中必须是唯一的，也就是基本上只能使用在一个地方，或者单独对某个标签做样式，其他标签无法应用。

例子：

Css：#wenben{font-size:14px}

html: <p id=”wenben”>字号大小14px<p>

上述例子表示当前这个p标签应用字体大小14px的样式，但其他p标签不能应用这个样式，有唯一性。

2、表示方法不同：

CLASS类选择器以标志符（英文句点）开头表示，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语“类”相关联。

例子：

.wenben{font-size:14px}

而id选择器的标志符是散列符号（#），标志符用来提醒浏览器接下来出现的是id值，具有唯一性。

例子：

#wenben{font-size:14px}

3、用途不同：

在网页中可以使用class属性来分类元素，id属性可以用来标记文档中的唯一元素。

使用注意事项

在网页设计中我们可能用将多个标签设计为同一个样式，这个时候我们就可以使用class选择器，可以重复使用在不同标签。

而有的布局我们要使用单独的布局或者唯一的布局，这样我们就可以使用id进行唯一说明，与class区别开。

好了以上就是关于“css中id与class区别介绍”，希望对您有所帮助。我是熊熊SEO，干货持续更新中，原创发布，禁止抄袭转载。