css中.号、#号、*号都是什么意思，通俗易懂系统讲解

今天系统说下css中的三个符号的作用，今天有时间科普下，详细如下：

1.（.）号的作用

CSS 中，点号（.）被用作选择器的一部分，用于选择类名。那么什么是类选择器呢？

类选择器是 CSS 中最常见的选择器之一。它以一个点号（.）开头，后跟类名。类名可以是任意命名规则遵循的字符串，用于标识 HTML 元素中的一个或多个元素。

类名的命名规则通常遵循以下规范：
– 类名以字母、下划线或连字符开头；
– 类名只能包含字母、数字、下划线和连字符。

那么为什么使用类选择器？

使用类选择器可以为一个或多个 HTML 元素同时应用相同的样式。这对于网站设计和开发非常有用，因为我们可以通过类选择器将样式规则应用于整个网站或特定的元素集合。

下面是一个示例，说明如何使用类选择器为 HTML 页面中的多个元素添加样式：

<style>
    .blue-text {
        color: blue;
    }
</style>
<p class="blue-text">这是一个蓝色的段落。</p>
<p class="blue-text">这是另一个蓝色的段落。</p>

把上面代码复制到你的开发工具中测试，可以看到，我们定义了一个类选择器.blue-text，并将其应用于两个<p>元素。这两个段落将会以蓝色显示，因为它们都具有.blue-text类。

类选择器与其他选择器的区别在哪里呢？

类选择器与其他选择器相比具有以下特点：
– 类选择器以点号（.）开头，后面跟类名，而 ID 选择器以井号（#）开头（后面我们在说下#的作用）；
– 类选择器可以被多个元素使用，而 ID 选择器只能被唯一的元素使用；
– 类选择器可以被多个样式规则引用，而 ID 选择器只能被一个样式规则引用。

下面在扩展讲解下多类选择器

多类选择器指的是同时选择含有多个类名的元素，在 CSS 中，我们还可以使用多类选择器为元素应用样式。下面我示例一下，展示了如何使用多类选择器：

<style>
    .red-text {
        color: red;
    }
    .bold-text {
        font-weight: bold;
    }
</style>
<p class="red-text bold-text">这是一个红色且加粗的段落。</p>

讲解：我们定义了两个类选择器.red-text和.bold-text，并将它们应用于同一个<p>元素。这个段落将以红色显示，并且文字加粗。

另外我们还可以用（.）的另一个功能，使用类选择器对特定元素进行样式修饰，通过类选择器，我们可以为特定的元素添加自定义的样式修饰。下面是一个示例，展示了如何为列表元素应用自定义的样式修饰：详细代码如下：

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
</style>
<ul>
    <li class="highlight">这是一个高亮的列表项。</li>
    <li>这是一个普通的列表项。</li>
    <li class="highlight">这是另一个高亮的列表项。</li>
</ul>

在上面的示例中，我们定义了一个类选择器.highlight，并将其应用于两个列表项。这两个列表项将以黄色背景和加粗字体显示。

点号（.）总结

在 CSS 中，点号（.）表示类选择器的一部分，用于选择类名。类选择器允许我们为一个或多个元素同时应用相同的样式。通过类选择器，我们可以方便地为特定元素或元素集合添加自定义的样式修饰。同时，我们还可以使用多类选择器为元素添加多个类名，以实现更丰富的样式效果。通过合理地运用类选择器，我们可以更好地管理和应用样式，使网页设计和开发更加高效。

2.（#）号的作用

CSS 中，#号（#）控制对应div的css样式，用作ID 选择器以 # 开头，后面跟着 ID 名称。那么什么是ID选择器呢？

ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。

如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

<style>
  #jinghao{
    background:#F00;
    height:20px;
    width:500px;}
</style>
<div id="jinghao"></div>

上面的代码运行后，你会发现，页面中出现一个高20px，宽500px，红色背景的一个层，它可以表明#号是控制id为“jinghao”的这个DIV的，也就是说css中#号是控制和他同名的网页元素的。

3.（*）号的作用

CSS 中，*号， *是css中的通配符，意思是所有的标签都有的属性，表示所有的标签都遵循的统一样式。

<style>
*{
font-size:14px;
}
</style>

运行代码会发现，上面的*号设置了页面中所有文字大小后面在没有单独设置的情况下为14像素。

4.三个符号总结

*号是标签都遵循的统一样式，这个不难理解。下面总结#和.的区别和用法，通俗易懂的说，#对应id，.对应class
不加对应html 标签，id优先大于class。

Class与ID的区别
　　一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线， 你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class=“Frodo” ，class=“Gandalf”，class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的 Class。

　　至于ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头，一个内容区域和一 个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

　　归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

　　在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用