CSS（Cascading Style Sheets）的选择器是网页样式设计中至关重要的工具，它们允许开发者精确地定位并应用样式到HTML文档中的元素。下面将逐一介绍几种主要的选择器类型，以及相关的注释和@规则。
1. 类选择器 (Class Selector)
类选择器通过.后跟类名来定义样式，可以应用于多个具有相同类名的元素上：
/* 定义一个名为 "highlight" 的类 */ .highlight { background-color: yellow; } <!-- 在HTML中使用 --> <p class="highlight">这段文本将会高亮显示</p> <div class="highlight">此div也会有相同的背景色</div>
2. ID 选择器 (ID Selector)
ID选择器使用#符号后面紧跟ID名称来指定唯一的元素，每个页面的ID应保证唯一性：
/* 定义一个ID为 "main-header" 的样式 */ #main-header { font-size: 24px; color: #333; } <!-- 在HTML中使用 --> <h1 id="main-header">主标题</h1>
3. 伪类选择器 (Pseudo-class Selector)
伪类选择器用于向某些特定状态的元素添加样式，如链接的不同状态：
/* 鼠标悬停时链接的颜色变化 */ a:hover { color: red; } /* 已访问过的链接颜色 */ a:visited { color: purple; }
4. 属性选择器 (Attribute Selector)
属性选择器根据HTML元素的属性及其值来选择元素：
/* 选择所有带有href属性的a元素 */ a[href] { text-decoration: underline; } /* 选择src属性值以".jpg"结尾的img元素 */ img[src$=".jpg"] { border: 1px solid black; }
5. 伪元素选择器 (Pseudo-element Selector)
伪元素选择器用于选择元素内容的一部分，而不是整个元素本身：
/* 选择每个段落的第一个字母作为伪元素，并设置样式 */ p::first-letter { font-size: larger; text-transform: uppercase; } /* 创建一个在元素内容之前插入的内容块 */ p::before { content: "Read: "; color: green; }
6. 后代选择器 (Descendant Selector)
后代选择器用来选择某个元素内部的所有特定后代元素：
/* 选择所有位于ul标签内的li元素 */ ul > li { list-style-type: disc; } /* 选择任何在div内包含的所有段落 */ div p { margin-bottom: 1em; }
7. 相邻后代选择器、子选择器 (Child Selector)
子选择器 (> 符号) 指定父元素直接子元素的样式：
/* 只选择直接位于.navbar下的 a 元素 */ .navbar > a { color: white; } /* 注意：相邻后代选择器实际上指的是相邻兄弟选择器，在这里纠正一下 */ /* 相邻兄弟选择器 (+ 符号) 选择紧随其后的同级元素 */ .h1 + p { margin-top: 0; }
8. 兄弟选择器 (Sibling Selector)
- 相邻兄弟选择器 (
+符号) 选择紧接在某个元素之后的同级元素：
/* 当p元素紧跟在一个h1元素后面时应用样式 */ h1 + p { font-weight: bold; } /* 一般兄弟选择器 (~ 符号) 选择所有紧跟在同一父元素下某元素之后的同级元素 */ h1 ~ p { color: blue; }
注释 (Comments)
CSS注释用于解释或临时禁用代码块：
/* 这是一个CSS注释，不会影响样式渲染 */ /* .example-selector { display: none; // 这行样式被注释掉了 } */
@规则 (@ Rules)
@media规则用于创建媒体查询，针对不同设备视口尺寸和特性应用不同的样式：
@media screen and (max-width: 600px) { body { font-size: 14px; } }
@font-face规则用于定义自定义字体：
@font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyCustomFont', sans-serif; }
@page规则用于定义打印样式表中的页面布局：
@page { size: A4; margin: 1in; }
以上仅列举了部分常见的CSS选择器和@规则，实际开发中还有其他许多复杂且强大的组合方式，可根据需要灵活运用。
