“.”的区别和 CSS 中的“#”选择器

“.” 和 “#” 的定义

在 CSS（层叠式样式表）中，我们通常使用 “.” 和 “#” 选择器来选择元素，二者具有不同的作用。

“.” 选择器是用来选取指定 class 的元素，而 “#” 选择器是用来选取指定 id 的元素。

“.” 和 “#” 的使用

“.” 的使用

使用 “.” 选择器来选择 class 属性为 “example” 的元素：

.example {
  color: red;
}

在 HTML 文件中有这样一个元素：

<p class="example">这是一个例子</p>

这段 CSS 代码将会选中这个元素，并将其文字颜色设置为红色。

“#” 的使用

使用 “#” 选择器来选择 id 属性为 “example” 的元素：

#example {
  color: blue;
}

在 HTML 文件中有这样一个元素：

<p id="example">这也是一个例子</p>

这段 CSS 代码将会选中这个元素，并将其文字颜色设置为蓝色。

“.” 和 “#” 的区别

重复使用

相同的 class 值可以被多次使用在同一个 HTML 文件中：

<p class="example">这是一个例子</p>
<p class="example">这是另一个例子</p>

这些元素都会被选中并设置为红色：

.example {
  color: red;
}

然而，id 值必须是唯一的。如果多次使用相同的 id 值，只有第一个元素会被选中，其它将被忽略：

<p id="example">这是一个例子</p>
<p id="example">这是另一个例子</p>

这些元素只有第一个会被选中并设置为蓝色：

#example {
  color: blue;
}

优先级

在 CSS 中，如果多个选择器都匹配同一个元素，那么优先级会按照如下顺序进行判定：

1. 以 “!” 开头的行内样式（即 style 属性）。
2. ID 选择器。
3. 类选择器、属性选择器、伪类选择器。
4. 元素选择器、伪元素选择器。

所以，id 选择器的优先级高于 class 选择器。

总结

“.” 选择器和 “#” 选择器是 CSS 中常用的两种选择器，它们在选取元素时具有不同的作用和优先级。使用时需要根据具体情况选择合适的选择器，并注意样式优先级的问题。