HTML5 选择器样式简介
HTML5 选择器样式是在HTML文档中使用CSS选择器来选择元素并为其应用样式的一种机制。选择器样式可以帮助开发者快速而准确地选择需要修改样式的元素，并通过CSS样式规则来定义元素的外观和布局。
基本概念
在了解HTML5选择器样式之前，我们需要先了解一些基本概念。
元素选择器
元素选择器是最常用的选择器类型，它通过元素的标签名来选择元素。比如，要选择所有的段落元素，可以使用以下代码：
p {
color: red;
}
上述代码中的p就是一个元素选择器，它会选择所有的<p>元素，并将它们的文本颜色设置为红色。
类选择器
类选择器通过元素的class属性来选择元素。为了使用类选择器，我们需要在HTML标签中的class属性中定义一个类名，然后在CSS样式表中使用该类名进行选择。比如，要选择所有带有highlight类名的元素，可以使用以下代码：
.highlight {
font-weight: bold;
}
上述代码中的.highlight就是一个类选择器，它会选择所有具有highlight类名的元素，并将它们的字体加粗。
ID选择器
ID选择器通过元素的id属性来选择元素。与类选择器类似，我们需要在HTML标签中的id属性中定义一个唯一的id值，然后在CSS样式表中使用该id值进行选择。比如，要选择具有header ID的元素，可以使用以下代码：
#header {
background-color: gray;
}
上述代码中的#header就是一个ID选择器，它会选择具有header ID的元素，并将它们的背景颜色设置为灰色。
组合选择器
组合选择器可以将多个选择器组合在一起，以便更精确地选择元素。常用的组合选择器包括后代选择器、子选择器和相邻兄弟选择器等。
- 后代选择器使用空格分隔两个选择器，选择所有符合第二个选择器的元素，其祖先元素符合第一个选择器。比如，要选择所有
<div>元素下的<p>元素，可以使用以下代码：
div p {
margin: 10px;
}
- 子选择器使用大于号（>）分隔两个选择器，选择所有符合第二个选择器的元素，其父元素符合第一个选择器。比如，要选择所有
<ul>元素下的直接子元素<li>元素，可以使用以下代码：
ul > li {
list-style: none;
}
- 相邻兄弟选择器使用加号（+）分隔两个选择器，选择紧接在第一个选择器后的第一个符合第二个选择器的元素。比如，要选择紧接在
<h2>元素后的第一个<p>元素，可以使用以下代码：
h2 + p {
color: blue;
}
伪类和伪元素选择器
伪类选择器和伪元素选择器可以根据元素的状态或位置选择元素。常见的伪类选择器包括:hover、:active和:focus等，用于选择鼠标悬停、被激活和获得焦点的元素。伪元素选择器使用双冒号（::）表示，常见的伪元素选择器包括::before和::after，用于在元素的内容之前或之后插入内容。
a:hover {
color: red;
}
p::before {
content: "前缀：";
}
上述代码中的:hover和::before就是伪类选择器和伪元素选择器。
示例
下面通过一个示例来演示如何使用HTML5选择器样式。
假设我们有一个HTML文档，其中包含以下内容
