CSS中的主要选择器

1. 类型选择器 (Type Selectors)

CSS中的选择器可以用来选择HTML元素并对其应用样式。了解主要选择器能够帮助你高效精准地选择页面中的元素，这让CSS成为一个强大的网页内容美化工具。本文将讨论主要的选择器类型：类型选择器（Type Selectors）、类选择器、ID选择器、分组选择器和通用选择器。

类型选择器会选择某一特定标签的所有元素。比如，如果需要为页面上的所有段落应用样式，可以使用带有

标签的类型选择器。

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

<p>这段文字将是蓝色的，字体大小为16像素。</p>
<p>第二段的样式相同。</p>

如果需要对某一类元素 (例如所有标题或段落) 应用样式，类型选择器非常有用。它可以对一组元素外观进行全局控制，从而简化了网站的维护。

2. 类选择器 (Class Selectors)

类选择器允许选择具有特定class属性值的元素。类名用点号（.）加类名表示。一个类可以被多个元素使用，这使得可以对多个元素应用相同的样式。

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">这段文字在黄色背景上是蓝色的。</p>
<p>普通文字，没有应用类样式。</p>
<div class="highlight">这个区块也会使用 highlight 类的样式。</div>

类选择器非常灵活且方便，因为它允许为不同元素创建通用样式。当需要为一组不相关的元素设置样式时，类尤其有用。

3. ID选择器 (ID Selectors)

ID选择器用于选择具有特定id属性值的元素。ID选择器以#加ID名表示。与类不同，一个ID在页面中应该是唯一的，因此非常适合用于为唯一的元素（如标题或导航栏）设置样式。

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">页面标题</h1>
<p>这一段不会受到ID选择器的影响。</p>

ID选择器只会对页面上的一个元素应用样式，因此它通常用于通过特定样式来突出独特的元素。

4. 分组选择器 (Group Selectors)

分组选择器允许对多个元素同时应用相同的样式。通过逗号将多个选择器组合在一起，便可以创建一个CSS规则。分组选择器简化了代码，因为它可以为多种类型的元素定义通用样式。

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这段文字不会被分组选择器影响。</p>

分组选择器有助于减少CSS代码并简化样式设计，尤其当需要对多种类型的元素应用相同的属性时（如不同级别的标题）。

5. 通用选择器 (Universal Selectors)

通用选择器用星号（*）表示，可选择页面上的所有元素。这是一个强大的工具，可以快速为所有元素定义基础样式，例如统一边距或设置默认字体。通用选择器对于“样式重置” (reset) 非常有用，当需要移除浏览器默认的边距和填充以便更精确地控制样式时。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>标题</h1>
<p>段落文字，没有边距和填充。</p>
<div>容器，没有边距和填充。</div>

在这个示例中，通用选择器为所有元素重置了边距和填充，从而帮助页面的样式保持一致。这种方法通常被用在CSS代码的开头，以创建统一的样式基础。