CSS 选择器演示

CSS 选择器是指定 CSS 样式应用的一种模式。本文将介绍常见的 CSS 选择器，并提供示例以演示它们的用法。

元素选择器

元素选择器是指通过 HTML 标签名称选择元素。例如，下面的 CSS 规则将应用于所有段落元素：

p {
  color: red;
}

类选择器

类选择器使用 HTML 元素的 "class" 属性选择元素。例如，下面的 CSS 规则将应用于所有带有类名 "warning" 的元素：

.warning {
  color: yellow;
}

ID 选择器

ID 选择器使用 HTML 元素的 "id" 属性选择元素。每个 ID 在文档中应该是唯一的。例如，下面的 CSS 规则将应用于具有 ID 名称 "header" 的元素：

#header {
  background-color: blue;
}

后代选择器

后代选择器选择一个元素的后代元素。这可以通过在选择器中使用空格来表示。例如，下面的 CSS 规则将应用于所有段落元素（p），其父级元素是列表元素（ul）：

ul p {
  font-weight: bold;
}

相邻兄弟选择器

相邻兄弟选择器选择紧接在另一个元素后面的元素。使用加号（+）表示。例如，下面的 CSS 规则将应用于第一个段落元素（p），其紧接在标题元素（h2）之后：

h2 + p {
  font-style: italic;
}

通用选择器

通用选择器选择页面上的所有元素。使用星号（*）表示。例如，下面的 CSS 规则将应用于页面上的所有元素：

* {
  margin: 0;
}

以上就是 CSS 选择器的常见类型和用法示例。熟练掌握这些选择器，可以为您的页面提供精细的样式控制。