深入理解CSS选择器：ID、类与标签选择器

大家好，欢迎来到今天的CSS讲座！今天我们要深入探讨的是CSS中最基础但也最强大的三种选择器：ID选择器、类选择器和标签选择器。如果你觉得自己已经掌握了这些基础知识，不妨再听一听，也许你会发现一些新的见解。如果你是CSS新手，那么今天的内容绝对会让你受益匪浅！

1. 标签选择器：HTML元素的“通用钥匙”

首先，我们来聊聊最简单的选择器——标签选择器。标签选择器就像一把“通用钥匙”，它可以匹配页面中所有相同类型的HTML元素。比如说，如果你想给所有的<p>标签加上样式，你可以这样写：

p {
  color: blue;
  font-size: 16px;
}

这段代码的意思是：“嘿，浏览器，找到页面中所有的<p>标签，把它们的文字颜色改成蓝色，字体大小设为16像素。”

标签选择器的特点：

广泛性：它会匹配页面中所有符合条件的标签，不管你有多少个<p>标签，都会被选中。
低优先级：在CSS的选择器优先级中，标签选择器的优先级是最低的。如果其他选择器（比如类选择器或ID选择器）也作用于同一个元素，它们的样式会覆盖标签选择器的样式。

实例：

假设你有以下HTML结构：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<h1>这是标题。</h1>

你可以用标签选择器分别给<p>和<h1>标签设置不同的样式：

p {
  color: blue;
}

h1 {
  color: red;
}

结果是：所有的<p>标签文字会变成蓝色，而<h1>标签的文字会变成红色。

2. 类选择器：HTML元素的“个性标签”

接下来，我们来看看类选择器。类选择器就像是给HTML元素贴上一个“个性标签”，你可以用它来为多个元素应用相同的样式，而不需要为每个元素单独定义样式。类选择器以.开头，后面跟着类名。

.para-style {
  color: green;
  font-weight: bold;
}

然后在HTML中，你可以通过class属性将这个样式应用到任意数量的元素上：

<p class="para-style">这是一个带有类样式的段落。</p>
<div class="para-style">这是一个带有类样式的div。</div>

类选择器的特点：

可复用性：类选择器可以应用于多个元素，甚至可以同时应用于不同类型的元素（如<p>、<div>等）。这使得类选择器非常适合用于重复使用的样式。
中等优先级：类选择器的优先级比标签选择器高，但比ID选择器低。如果一个元素同时有类选择器和标签选择器的样式，类选择器的样式会覆盖标签选择器的样式。

多类选择器：

你还可以为一个元素指定多个类，类之间用空格分隔。例如：

<p class="para-style highlight">这是一个带有多个类的段落。</p>

在CSS中，你可以分别为这两个类定义样式：

.para-style {
  color: green;
}

.highlight {
  background-color: yellow;
}

结果是：这段文字会显示为绿色，并且背景为黄色。

3. ID选择器：HTML元素的“唯一标识符”

最后，我们来谈谈ID选择器。ID选择器就像是给HTML元素分配了一个“唯一标识符”，它只能用于页面中的一个元素。ID选择器以#开头，后面跟着ID名称。

#unique-element {
  font-size: 24px;
  color: purple;
}

然后在HTML中，你可以通过id属性将这个样式应用到唯一的元素上：

<p id="unique-element">这是唯一带有ID样式的段落。</p>

ID选择器的特点：

唯一性：ID选择器只能应用于页面中的一个元素。如果你在一个页面中有多个相同的ID，浏览器可能会忽略后面的ID，或者产生不可预测的行为。因此，使用ID时一定要确保它的唯一性。
最高优先级：ID选择器的优先级是最高的。如果一个元素同时有ID选择器、类选择器和标签选择器的样式，ID选择器的样式会覆盖其他选择器的样式。

实例：

假设你有以下HTML结构：

<p id="special-paragraph">这是带有ID的特殊段落。</p>
<p class="para-style">这是带有类样式的普通段落。</p>

你可以为它们分别定义样式：

#special-paragraph {
  color: purple;
  font-size: 24px;
}

.para-style {
  color: green;
}

结果是：带有ID的段落会显示为紫色，字体大小为24像素；而带有类的段落会显示为绿色，字体大小保持默认。

4. 选择器优先级：谁说了算？

在CSS中，当多个选择器同时作用于同一个元素时，浏览器会根据选择器的优先级来决定最终应用哪个样式。优先级的规则如下：

选择器类型	权重值
内联样式	1000
ID选择器	100
类选择器、伪类	10
标签选择器	1

优先级计算示例：

假设你有以下CSS规则：

p {
  color: blue; /* 标签选择器 */
}

.para-style {
  color: green; /* 类选择器 */
}

#special-paragraph {
  color: purple; /* ID选择器 */
}

对于以下HTML结构：

<p id="special-paragraph" class="para-style">这是一个带有ID和类的段落。</p>

根据优先级规则：

p选择器的权重是1。
.para-style选择器的权重是10。
#special-paragraph选择器的权重是100。

因此，最终的文字颜色会是紫色，因为ID选择器的优先级最高。

优先级冲突的解决：

如果你希望某个选择器的优先级更高，可以通过增加选择器的复杂度来提高其权重。例如：

body p.para-style {
  color: orange;
}

这条规则的权重是1 + 1 + 10 = 12，比单纯的类选择器（权重10）要高。

5. 总结

今天我们学习了CSS中的三种基本选择器：标签选择器、类选择器和ID选择器。每种选择器都有其独特的用途和特点：

标签选择器适用于所有相同类型的元素，优先级最低。
类选择器可以复用，适用于多个元素，优先级中等。
ID选择器只能用于一个元素，优先级最高。

此外，我们还了解了选择器的优先级规则，帮助我们在多个样式冲突时做出正确的判断。

希望今天的讲座能让你对CSS选择器有更深入的理解。如果你还有任何疑问，欢迎在评论区留言！下次见！