CSS知识点 类选择器和元素选择器

元素选择器（Element Selector）是直接用HTML标签名来选中页面中的元素，比如 h1、p、div 等。例如：

p {
  color: blue;
}

这个规则选中所有<p>元素。

---

类选择器（Class Selector）是通过元素的 class 属性来选中具有特定类名的元素，写法是在类名前加点号.，比如 .my-class。例如：

.my-class {
  color: red;
}

这个规则选中所有class="my-class"的元素。

---

两者权重比较：

• 类选择器的权重大于元素选择器。
• 也就是说，当同一元素同时匹配类选择器和元素选择器时，类选择器定义的样式会覆盖元素选择器的样式。

举例：

p {
  color: blue;  /* 元素选择器 */
}

.my-class {
  color: red;   /* 类选择器 */
}

HTML:

<p class="my-class">这段文字是红色的</p>

结果这段文字颜色是红色，因为类选择器权重大于元素选择器。