css中.和 的区别

在css中，.和#是两个非常常见的符号，它们都是用于选择元素的标识符。其中，点（.）用于指定一个类选择器，井号（#）用于指定一个id选择器。虽然这两个标识符非常相似，但它们在css中有着不同的用途和效果。本文将深入探讨它们的区别。

1.选择器的语法结构不同

在CSS选择器中，类选择器和ID选择器都是以"."和"#"作为标识符的前缀。但是，它们在使用时语法结构却存在一定的区别。类选择器是通过在选择器之前添加一个"."（点号）来定义的，而ID选择器则是在选择器之前添加一个"#"（井号）。

例如，在页面中找到一个class属性为"example"的元素，可以使用类选择器，如下所示：

.example {   color: red;}

要找到id属性为"example"的元素，可以使用ID选择器，如下所示：

立即学习“前端免费学习笔记（深入）”；

#example {   color: blue;}

2.权重不同

在CSS中，每种选择器都有一个权重值，用来指定在多个规则应用到同一个元素时，选择器的优先级。类选择器和ID选择器的权重值是不同的。一般来说，由于ID选择器对应的元素唯一，因此它的权重值相对较高。相反，类选择器对应的元素可以有多个，因此它的权重值相对较低。

当使用多个选择器来为同一元素定义样式时，选择器的权重值将会起作用。如果使用的是类选择器，而不是ID选择器，则可以使用更具体的选择器进行样式定义以增加权重值。

3.适用范围不同

类选择器和ID选择器的另一个区别是它们适用的范围不同。类选择器可以应用于多个元素，而ID选择器只能应用于一个具有唯一id值的元素。这也是为什么我们通常使用ID选择器来定义单个元素的样式，而使用类选择器来定义一组元素的公共样式。

例如，可以使用类选择器来定义一个CSS规则集，该规则集将应用于页面所有段落元素：

p {   font-size: 16px;   font-weight: bold;}

使用ID选择器来定义一个CSS规则集，该规则集将应用于页面上唯一的h1元素：

#page-header {   font-size: 24px;   color: #000;}

总结

在CSS中，类选择器和ID选择器都是用于选择元素的标识符。尽管它们非常相似，但它们的用法，权重和适用范围都不同。类选择器可以用于多个元素，其权重相对较低，而ID选择器则适用于单个元素，其权重相对较高。因此，在使用时，需要根据具体需求来选择适当的选择器。