页面中多个不相关的元素推荐使用哪个选择器

在页面中如果有多个不相关的元素，可以使用类选择器（class selector）来为它们添加样式。类选择器以点号（.）开头，后面跟着类名，类名可以自己定义。例如：

<p class="description">这是一个段落</p>
<div class="box">这是一个div</div>
<button class="btn">点击按钮</button>

上面的代码中，`class`属性被用来添加类名，而`.description`、`.box`、`.btn`则是类选择器。

使用类选择器的好处是可以同时为多个元素添加相同的样式，而不需要为每个元素分别设置样式。可以使用同一个类名为多个不相关的元素添加相同的样式。例如：

.description {
  font-size: 14px;
  color: #333;
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

上面的代码中，使用了`.description`、`.box`、`.btn`三个类选择器分别为不同的元素添加样式，这些元素之间没有任何关系，但可以共用同一个类名来添加样式。

相关问题

选择页面中多个不相关的元素推荐使用哪个选择器

如果页面中有多个不相关的元素，并且你想要为它们设置共同的样式，可以使用类选择器（class selector）或者属性选择器（attribute selector）。

类选择器可以为页面中任意元素添加类名，然后使用 `.类名` 的形式进行选择。例如，你可以为多个不相关的元素添加同一个类名，然后使用类选择器为它们设置共同的样式：

<div class="my-class">元素1</div>
<p class="my-class">元素2</p>
<span class="my-class">元素3</span>

.my-class {
  color: red;
  font-size: 16px;
}

属性选择器可以根据元素的属性值进行选择，使用 `[属性名=属性值]` 的形式进行选择。例如，你可以为多个不相关的元素设置相同的自定义属性，然后使用属性选择器为它们设置共同的样式：

<div data-my-attr="value1">元素1</div>
<p data-my-attr="value2">元素2</p>
<span data-my-attr="value3">元素3</span>

[data-my-attr] {
  color: red;
  font-size: 16px;
}

需要注意的是，类选择器和属性选择器都是相对较为通用的选择器，如果使用不当可能会影响到其他元素的样式。如果只需要为某个元素设置样式，可以使用元素选择器（element selector）或者 ID 选择器（ID selector）等更具体的选择器。

多个不相关的元素推荐使用哪个选择器

如果需要选中多个不相关的元素，推荐使用通用选择器 `*`。通用选择器可以匹配文档中任意类型的元素。例如，如果需要将页面中所有的元素的边框样式设置为红色，可以使用以下 CSS 代码：

* {
  border: 1px solid red;
}

这样就可以将所有元素的边框样式设置为红色，而不需要一个一个地指定元素类型或类名。但是需要注意，通用选择器会匹配文档中所有的元素，包括 HTML 元素、SVG 元素和 MathML 元素等，因此在使用通用选择器时需要谨慎，避免对页面性能造成影响。