CSS选择器全览：从基础到高级，涵盖CSS2和CSS3

"关于CSS选择器和XPath选择器的学习笔记" 在Web开发中，选择器是定位和操作HTML或XML文档中元素的关键工具。本文主要介绍了CSS选择器，包括CSS2和CSS3的部分规定，以及对XPath选择器的简单提及。 ### CSS选择器 #### 基本选择器 1. **通用元素选择器 `*`**：这个选择器匹配文档中的任何元素。 2. **标签选择器 `E`**：通过元素标签名来选择元素，如`p`会选择所有的段落元素。 3. **类选择器 `.info`**：选择类(class)属性值包含指定字符串的元素，例如`.info`会匹配所有class包含`info`的元素。 4. **ID选择器 `#footer`**：选择id属性等于给定值的唯一元素，如`#footer`会匹配id为`footer`的元素。 #### 多元素的组合选择器 5. **多元素选择器 `E,F`**：使用逗号分隔，选择所有E元素和F元素。 6. **后代元素选择器 `EF`**：用空格分隔，选择所有E元素内的F元素。 7. **子元素选择器 `E > F`**：使用大于号，选择所有直接作为E元素子节点的F元素。 8. **毗邻元素选择器 `E + F`**：使用加号，选择紧跟在E元素后面的同级元素F。 #### CSS2.1属性选择器 9. **属性选择器 `E[att]`**：选择所有具有指定属性`att`的E元素。 10. **属性值包含选择器 `E[att=value]`**：选择属性`att`值等于`value`的E元素。 11. **属性值以某个值开头的选择器 `E[att^=value]`**：选择属性`att`值以`value`开头的E元素。 12. **属性值以某个值结尾的选择器 `E[att$=value]`**：选择属性`att`值以`value`结尾的E元素。 13. **属性值包含某个值的选择器 `E[att*=value]`**：选择属性`att`值包含`value`的E元素。 ### XPath选择器 XPath是一种在XML文档中查找信息的语言，它用于选取XML节点，包括元素、属性、文本等。虽然这里没有详细展开，XPath选择器可以基于节点的路径、名称、属性等进行选择，提供了丰富的表达能力，例如： - `/`: 根路径选择器 - `//`: 任何路径下的节点选择器 - `.//`: 当前节点的后代节点选择器 - `@`: 属性选择器 - `node()`: 选取所有节点，包括元素、文本、注释和处理指令 掌握CSS选择器和XPath选择器是前端开发者必备的技能，它们能够高效精准地定位页面元素，实现动态样式应用和数据提取等功能。通过深入学习和实践，开发者可以更好地控制网页的布局和交互效果。