CSS（Cascading Style Sheets）是用于控制网页样式的语言。在CSS中，选择器（Selector）用于选择页面上的HTML元素，以便应用样式规则。以下是对CSS中常见选择器的详细介绍，以及相应的HTML和CSS代码示例。
1. 通配符选择器（Universal Selector）
通配符选择器使用星号（*）表示，可以匹配页面上的所有元素。
场景：当需要为页面上所有元素设置统一的样式时。
CSS代码：
* { margin: 0; padding: 0; box-sizing: border-box; }
2. 元素选择器（Type Selector）
元素选择器直接使用HTML元素的名称，只选择该类型的所有元素。
场景：为特定类型的元素设置样式。
CSS代码：
p { color: #333; }
3. 类选择器（Class Selector）
类选择器使用点（.）开头，后面跟上类名，可以为拥有相同类的元素设置样式。
场景：为具有相同样式的多个元素设置样式。
HTML代码：
<div class="highlight">这是一段高亮文本。</div>
CSS代码：
.highlight { background-color: yellow; }
4. ID选择器（ID Selector）
ID选择器使用井号（#）开头，后面跟上ID名，用于选择具有特定ID的元素。
场景：为页面上唯一的元素设置样式。
HTML代码：
<div id="unique">这是唯一的元素。</div>
CSS代码：
#unique { border: 1px solid red; }
5. 交集选择器（Descendant Selector）
交集选择器允许你选择作为某个元素后代的所有元素。
场景：选择特定父元素下的所有子元素。
CSS代码：
#parent .child { font-size: 14px; }
6. 并集选择器（Grouping Selector）
并集选择器使用逗号分隔多个选择器，为多个元素设置相同的样式。
场景：为多个不同类型的元素设置相同的样式。
CSS代码：
h1, h2, h3 { color: blue; }
7. 后代选择器（Child Selector）
后代选择器使用大于号（>）表示，选择某个元素的直接子元素。
场景：选择特定父元素的直接子元素。
CSS代码：
#parent > p { font-weight: bold; }
8. 子代选择器（Sub-selector）
子代选择器使用空格分隔，选择某个元素的所有子元素，不论层级。
场景：选择特定父元素的所有子元素。
CSS代码：
#parent p { margin-left: 20px; }
9. 兄弟选择器（Adjacent Sibling Selector）
兄弟选择器使用加号（+）表示，选择紧接在另一个元素后的同级元素。
场景：选择紧跟在特定元素后的同级元素。
CSS代码：
h2 + p { margin-top: 0; }
10. 属性选择器（Attribute Selector）
属性选择器用于选择具有特定属性或属性值的元素。
场景：根据元素的属性或属性值设置样式。
CSS代码：
a[target="_blank"] { color: green; }
11. 伪类选择器（Pseudo-class Selector）
伪类选择器用于选择处于特定状态的元素。
场景：为元素的特定状态设置样式。
CSS代码：
a:hover { color: red; }
综合示例
以下是一个综合示例，展示了如何将上述选择器应用于一个简单的HTML页面。
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="unique" class="highlight"> <h1>标题一</h1> <p>这是一段文本。</p> <div> <p class="highlight">这是另一段文本。</p> </div> <ul> <li>列表项一</li> <li class="highlight">列表项二</li> <li>列表项三</li> </ul> </div> </body> </html>
CSS代码（styles.css）：
/* 通配符选择器 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 元素选择器 */ body { font-family: Arial, sans-serif; } /* 类选择器 */ .highlight { background-color: yellow; } /* ID选择器 */ #unique { border: 1px solid red; padding: 20px; } /* 交集选择器 */ #unique h1 { color: blue; } /* 并集选择器 */ h1, h2 { font-size: 24px; } /* 后代选择器 */ #unique > p { margin-bottom: 10px; } /* 子代选择器 */ #unique p { color: #333; } /* 兄弟选择器 */ h1 + p { font-style: italic; } /* 属性选择器 */ a[target="_blank"] { text-decoration: underline; } /* 伪类选择器 */ a:hover { color: red; }
通过这个综合示例，你可以看到如何将不同的CSS选择器应用于实际的HTML页面中，以实现丰富的样式控制。
