元素选择器

元素选择器（Element Selector）是CSS中最基础、最常用的选择器之一。它通过HTML元素的标签名来选择页面中的元素。

基本语法

元素选择器的语法非常简单，直接使用HTML元素的标签名作为选择器：

element {
  property: value;
}

工作原理

元素选择器会匹配HTML文档中所有指定标签名的元素，并为它们应用相应的CSS样式。

使用示例

示例1：为所有段落设置样式

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

这段CSS会选择页面中所有的<p>标签，并将它们的文本颜色设置为蓝色，字体大小设置为16像素，行高设置为1.5倍。

示例2：为所有标题设置样式

h1 {
  color: red;
  font-size: 32px;
  font-weight: bold;
}

h2 {
  color: green;
  font-size: 24px;
  font-weight: 600;
}

这段CSS会分别选择页面中所有的<h1>和<h2>标签，并为它们设置不同的样式。

示例3：为所有列表项设置样式

li {
  list-style-type: square;
  margin-bottom: 8px;
}

这段CSS会选择页面中所有的<li>标签，将它们的列表标记设置为方块，并在每个列表项下方添加8像素的外边距。

特点

1. 通用性：元素选择器会匹配文档中所有指定类型的元素
2. 低优先级：在CSS选择器优先级中，元素选择器的优先级较低（仅高于通配符选择器）
3. 简单易用：语法简单，易于理解和使用

注意事项

1. 元素选择器会影响页面中所有匹配的元素，因此在使用时要注意其全局影响
2. 如果需要更精确地选择元素，可以结合其他选择器使用（如类选择器、ID选择器等）
3. 元素选择器的标签名区分大小写吗？在HTML中，标签名不区分大小写，但在XHTML中区分大小写。为了保持一致性，建议使用小写的标签名

浏览器兼容性

元素选择器是CSS1规范中定义的选择器，所有现代浏览器都完全支持。

相关资源

• MDN Web Docs - 元素选择器
• W3Schools - CSS 元素选择器

学习建议

元素选择器是CSS选择器的基础，建议初学者先掌握元素选择器的使用，再学习更复杂的选择器。在实际项目中，元素选择器常用于设置页面的基础样式（如重置样式、设置默认字体等）。