跳到主要内容

CSS 通用选择器

CSS（层叠样式表）是用于描述HTML文档外观的语言。在CSS中，选择器用于选择你想要样式化的HTML元素。通用选择器是CSS中最基本且功能强大的选择器之一。它允许你选择页面上的所有元素，并对其应用样式。

什么是通用选择器？​

通用选择器使用星号（*）表示，它匹配文档中的所有元素。这意味着无论元素的类型、类名或ID是什么，通用选择器都会选中它们。

语法​

css
* {
  属性: 值;
}

例如，以下代码会将页面中所有元素的字体颜色设置为红色：

css
* {
  color: red;
}
备注

通用选择器会匹配所有元素，包括 <html>、<body>、<div>、<p> 等。因此，使用时要谨慎，以免影响页面性能。

通用选择器的实际应用​

1. 重置默认样式​

在Web开发中，不同浏览器对HTML元素的默认样式可能有所不同。为了确保页面在所有浏览器中表现一致，开发者通常会使用通用选择器来重置默认样式。

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

这段代码将所有元素的外边距（margin）和内边距（padding）设置为0，并将盒模型设置为 border-box，从而确保元素的大小计算更加直观。

提示

box-sizing: border-box; 是一个非常有用的属性，它使得元素的宽度和高度包括内边距和边框，而不是仅仅包括内容区域。

2. 全局字体设置​

如果你希望整个页面使用相同的字体，可以使用通用选择器来设置全局字体样式。

css
* {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

这段代码将所有元素的字体设置为 Arial，并设置字体大小为 16px。

3. 与其他选择器结合使用​

通用选择器可以与其他选择器结合使用，以实现更精确的选择。例如，以下代码会选择所有 <div> 元素内的所有子元素，并将它们的背景颜色设置为浅灰色：

css
div * {
  background-color: lightgray;
}

通用选择器的性能考虑​

虽然通用选择器非常方便，但它可能会对页面性能产生负面影响。因为通用选择器会匹配页面中的所有元素，浏览器需要遍历整个DOM树来应用样式。因此，在大型项目中，过度使用通用选择器可能会导致页面加载速度变慢。

警告

尽量避免在大型项目或复杂页面中频繁使用通用选择器。如果可能，尽量使用更具体的选择器来替代通用选择器。

实际案例​

假设你正在开发一个简单的博客页面，你希望所有元素的字体颜色为深灰色，并且所有链接的颜色为蓝色。你可以使用以下CSS代码：

css
* {
  color: #333;
}

a {
  color: blue;
}

这段代码将所有元素的字体颜色设置为深灰色（#333），并将所有链接的颜色设置为蓝色。

总结​

CSS通用选择器是一个强大的工具，它允许你选择页面中的所有元素并对其应用样式。它常用于重置默认样式、设置全局字体样式以及与其他选择器结合使用。然而，由于它会影响页面中的所有元素，因此在使用时需要谨慎，以避免性能问题。

附加资源与练习​

练习​

  1. 使用通用选择器将所有元素的内边距和外边距重置为0。
  2. 结合通用选择器和其他选择器，将所有 <div> 元素内的所有子元素的背景颜色设置为浅蓝色。

进一步学习​

通过练习和进一步学习，你将更好地掌握CSS通用选择器的使用，并能够在实际项目中灵活应用。