[分享]css中 .和 的区别

在CSS中，使用“.”和“”这两个符号来选择元素的样式效果，两者的作用是不同的。下面就来详细介绍一下它们的区别。首先，“.”在CSS中是代表class选择器，也就是说，我们可以给HTML元素添加多个c...

在CSS中，使用“.”和“#”这两个符号来选择元素的样式效果，两者的作用是不同的。下面就来详细介绍一下它们的区别。

首先，“.”在CSS中是代表class选择器，也就是说，我们可以给HTML元素添加多个class属性，通过“.”来选择需要的样式效果。

/* HTML */
<div class="red big">这是一个红色的大的 DIV 元素</div>

/* CSS */
.red {
  color: red;
}

.big {
  font-size: 24px;
} 

上述代码中，我们在HTML的 div 元素中添加了两个 class 属性，分别是“red”和“big”，然后在CSS中分别对这两个 class 进行编写样式，最后我们可以看到，这个 div 元素同时拥有了红色和加大字体的效果。

而号“#”在CSS中是代表id选择器，它仅仅能够选中HTML元素中唯一的id属性，并且id属性在同一个HTML文档中只能出现一次。

/* HTML */
<div id="container">这是一个容器 DIV 元素</div>

/* CSS */
#container {
  width: 600px;
  height: 400px;
  margin: 0 auto;
} 

上述代码中，我们给HTML元素中的 div 添加了一个id属性，并且在CSS中使用“#”来选中这个ID，然后为这个容器添加了样式效果，即设置它的宽高和居中对齐。

总结起来，我们可以这样理解二者之间的区别：当需要对多个HTML元素同时应用相同样式的时候，应该使用“.”，即class选择器；而当需要为某个具有唯一性的HTML元素设置更加专属的样式时，应该使用“#”，即id选择器。