4.2 CSS选择器与样式规则
在CSS中，选择器是核心概念之一，它决定了哪些HTML元素会被应用样式规则。本章将详细介绍CSS的选择器以及样式规则的构成，并通过实例加深理解。
4.2.1 选择器进阶
除了第一章介绍的基础选择器外，CSS还提供了更多高级选择器，以便更精确地选择元素并应用样式。1、属性选择器
根据元素的属性及属性值来选择元素。
示例：input[type=“text”] { color: blue; } 会将所有type属性为text的input元素的文字颜色设置为蓝色。2、伪类选择器
用于定义元素的特殊状态，如链接的四种状态:
（:link、:visited、:hover、:active）
元素的第一个子元素（:first-child）等。
示例：a:hover { color: red; } 会将鼠标悬停时的链接文字颜色设置为红色。3、伪元素选择器
用于样式化元素的特定部分，如::before和::after用于在元素内容前后插入内容并设置样式。
示例：p::before { content: “注意：”; color: red; } 会在每个
元素的内容前添加红色的注意：文本。4、组合选择器
包括后代选择器（空格分隔）、子选择器（>）、相邻兄弟选择器（+）和通用兄弟选择器（~），用于选择具有特定关系的元素。
示例：ul > li { list-style-type: none; } 会移除所有直接位于ul元素下的li元素的列表项标记。
4.2.2 样式规则
样式规则由选择器和一组声明组成，声明用于指定元素的样式。声明
声明由属性名和属性值组成，用冒号（:）分隔，并以分号（;）结束。
示例：color: red; 是一个声明，它指定了元素的文字颜色为红色。声明块
一组声明被包裹在花括号（{}）中，形成一个声明块。
示例：p { color: red; font-size: 16px; } 是一个包含两个声明的声明块，它设置了<p>元素的文字颜色和字体大小。优先级
当多个样式规则应用于同一个元素时，会根据选择器的优先级来决定最终应用的样式。
优先级从高到低依次为：内联样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器 > 通配符选择器、关系选择器（如+、>、~、空格）。
4.2.3 实例
假设我们有一个简单的HTML结构，如下所示：
<ulid="nav"><liclass="active"><ahref="#">首页</a></li><li><ahref="#">关于我们</a></li><li><ahref="#">服务</a></li></ul>我们可以使用CSS来美化这个导航栏，如下所示：
/* 移除列表项标记 */ul#nav li{list-style-type:none;}/* 设置链接的样式 */ul#nav a{color:black;text-decoration:none;}/* 设置当前激活项的背景色 */ul#nav li.active a{background-color:yellow;}/* 当鼠标悬停在链接上时改变颜色 */ul#nav a:hover{color:red;}
