CSS选择器

CSS选择器简介

CSS选择器（CSS Selector）是用于选择HTML文档中特定元素的一种模式语言，最初为CSS样式表设计，现广泛应用于网页抓取和前端开发中。

主要特点

• ​​简洁直观​​：语法接近自然语言，易于理解
• ​​专为HTML设计​​：特别适合网页元素选择
• ​​浏览器原生支持​​：所有现代浏览器都内置CSS选择器引擎
• ​​性能优化​​：浏览器对CSS选择器的解析和匹配做了大量优化

基本语法

• 选择所有元素
• tag 按标签名选择（如div）
• .class 按class选择（如.header）
• #id 按id选择（如#main）
• [attr] 按属性选择（如[href]）
• 后代选择器（空格）
• > 子元素选择器
• + 相邻兄弟选择器
• ~ 通用兄弟选择器

常用选择器示例

div.content           /* 选择class为content的div元素 */
#main > p:first-child /* 选择id为main的元素下的第一个p子元素 */
a[target="_blank"]    /* 选择target属性为_blank的a标签 */
li:nth-child(2n+1)    /* 选择所有奇数位置的li元素 */
input[type="text"]    /* 选择所有文本输入框 */

与XPath的比较

• ​​语法简洁性​​：CSS选择器通常更简洁
• ​​可读性​​：CSS选择器对前端开发者更友好
• ​​功能​​：XPath功能更强大（如选择父节点、文本匹配等）
• ​​性能​​：在现代浏览器中CSS选择器通常更快
• ​​应用场景​​：CSS选择器更适合网页开发，XPath更适合复杂的数据提取

CSS选择器是网页抓取（如BeautifulSoup、Scrapy等工具）和前端开发中的核心技能之一。