[分享]css中 和点分别代表啥

CSS是网页设计中不可或缺的一部分，在 CSS 中，我们经常会用到“.”和“”这两个符号，它们代表的含义有何不同呢？ .class { / 这里是 CSS 样式 / } id { / 这里是 CSS ...

CSS是网页设计中不可或缺的一部分，在 CSS 中，我们经常会用到“.”和“#”这两个符号，它们代表的含义有何不同呢？

 .class {
        /* 这里是 CSS 样式 */
    }

    #id {
        /* 这里是 CSS 样式 */
    } 

首先让我们来看看点（“.”）代表的含义。点符号表示类（class），我们可以使用类来为一组 HTML 元素设置相同的样式。例如，我们可以为所有的段落设置相同的字体大小：

 .paragraph {
        font-size: 16px;
    } 

上述 CSS 代码中，“.paragraph”表示一个类名，表示所有使用这个类的 HTML 元素都会具有这个样式。我们只需要在 HTML 中，引用这个类名，并将其赋值给“class”属性即可。

 <p class="paragraph">这里是文字内容</p> 

接下来，让我们来看看“#”号代表的含义。#号表示 ID，每一个 HTML 元素都可以有一个唯一的 ID 值。ID 可以让我们有针对性地为某个特定的元素设置样式，而不影响其他元素。例如：

 #logo {
        width: 100px;
        height: 100px;
    } 

上述 CSS 代码中，“#logo”表示一个 ID 名称，表示只有具有这个 ID 的 HTML 元素（例如一个 logo 图片）才会应用这个样式。我们可以在 HTML 中，为这个元素设置与 CSS 中相对应的 ID 值：

 <img src="logo.png" alt="公司logo" id="logo"> 

总结来说，“.”表示类，是一组元素的集合，我们可以为这组元素设置相同的样式；“#”号表示 ID，是唯一的，用于某个具体的元素，我们可以为该元素设置具体的样式。