CSS选择符详解：CSS1与CSS2的用法与实例

"本文详细介绍了CSS1和CSS2中的选择符用法和实例，涵盖了类型选择符、包含选择符、ID选择符、类选择符、分组选择符、通配选择符、子选择符、相邻选择符、属性选择符以及伪类和伪对象选择符。" 在CSS中，选择符是用于选取我们需要应用样式的HTML元素的关键工具。以下是各类选择符的详细说明： 1. **类型选择符 (Type Selectors)**: 以元素名如`div`, `p`等定义，用于选取特定类型的元素。例如，`div {color: #F00;}`将所有`div`元素的文字颜色设置为红色。 2. **包含选择符 (Descendant Selectors)**: 使用空格分隔两个选择符，如`div p`，选择`div`内的所有`p`元素。例如，`#container p {font-size: 14px;}`将容器`#container`内所有段落的字体大小设为14像素。 3. **ID选择符 (ID Selectors)**: 使用`#`前缀，如`#header`，选择具有相应ID的唯一元素。例如，`#header {background-color: #333;}`将ID为`header`的元素背景设为深灰色。 4. **类选择符 (Class Selectors)**: 使用`.`前缀，如`.highlight`，选择具有指定类的元素。例如，`.highlight {text-decoration: underline;}`将所有类为`highlight`的文本下划线。 5. **分组选择符 (Grouping Selectors)**: 使用逗号分隔多个选择符，如`h1, h2, h3`，一次性设置多个选择符的样式。例如，`h1, h2, h3 {color: #666; font-family: Arial, sans-serif;}`将所有一级到三级标题的字体颜色设为灰色，并设定字体。 6. **通配选择符 (Universal Selectors)**: 使用`*`，选择所有元素。例如，`* {margin: 0; padding: 0;}`清除所有元素的内外边距。 7. **子选择符 (Child Selectors)**: 使用`>`，如`ul > li`，选择直接作为`ul`子元素的`li`。例如，`ul > li {list-style-type: none;}`使`ul`下的直接`li`元素无列表样式。 8. **相邻选择符 (Adjacent Selectors)**: 使用`+`，如`h1 + p`，选择紧跟在`h1`后面的`p`元素。例如，`h1 + p {margin-top: 10px;}`为紧跟在`h1`后的`p`元素添加10像素的上外边距。 9. **属性选择符 (Attribute Selectors)**: 根据元素的属性进行选择，如`input[type="text"]`，选择所有type属性为"text"的`input`元素。 10. **伪类选择符 (Pseudo-Classes)**: 如`:hover`, `:active`, `:focus`等，用于在特定状态时改变元素样式。例如，`:hover`常用于链接，如`a:hover {color: blue;}`使鼠标悬停在链接上时变为蓝色。 11. **伪对象选择符 (Pseudo-Elements)**: 如`:first-letter`, `::before`, `::after`等，用于选取元素的一部分或添加额外内容。例如，`:first-letter`用于选取元素的第一个字母，`::before`和`::after`则在元素内容前后插入内容。 理解并熟练掌握这些选择符，将有助于更精确地控制网页的布局和样式，提升设计的灵活性和用户体验。在实际应用中，根据需求灵活组合使用这些选择符，可以实现丰富的样式效果。