本节中的文章

查看更多

CSS选择器入门指南

Avatar
Admin
  • 更新

什么是CSS选择器

CSS选择器是用来选择HTML网页中特定元素的工具。就像在网页上用鼠标点击某个内容一样，CSS选择器可以让程序自动"找到"并提取我们需要的数据，比如商品价格、新闻标题、图片链接等。

基础选择器

1. 标签选择器 - 按元素类型选择

最简单的选择器，直接写HTML标签名：

CSS选择器 说明
div 选择所有的div元素
p 选择所有的段落
a 选择所有的链接
img 选择所有的图片
h1 选择所有的一级标题
span 选择所有的span元素

实际应用场景：

CSS选择器 用途
title 获取网页标题
h1 获取页面主标题
p 获取所有段落文字
a 获取所有链接

2. 类选择器 - 按class属性选择

在CSS选择器前加一个点(.)：

CSS选择器 说明
.content 选择class="content"的元素
.price 选择class="price"的元素
.title 选择class="title"的元素
.product-item 选择class="product-item"的元素

实际应用场景：

CSS选择器 用途
.product-title 商品标题
.price-now 当前价格
.user-name 用户名
.article-content 文章内容

3. ID选择器 - 按id属性选择

在CSS选择器前加一个井号(#)：

CSS选择器 说明
#header 选择id="header"的元素
#content 选择id="content"的元素
#footer 选择id="footer"的元素

实际应用场景：

CSS选择器 用途
#main-content 主要内容区域
#product-info 产品信息区域
#user-profile 用户资料区域

4. 属性选择器 - 按属性选择

用方括号[]包围属性名：

CSS选择器 说明
[href] 选择有href属性的元素（通常是链接）
[src] 选择有src属性的元素（通常是图片）
[type="text"] 选择type属性为"text"的元素
[class="btn"] 选择class属性为"btn"的元素

实际应用场景：

CSS选择器 用途
[data-price] 选择有价格数据的元素
[alt] 选择有alt属性的图片
[title] 选择有title属性的元素

组合选择器

1. 后代选择器（空格）- 选择内部元素

用空格连接两个选择器，选择第一个选择器内部的第二个选择器：

CSS选择器 说明
div p 选择div里面的所有p元素
.container a 选择container类里面的所有链接
#header h1 选择header里面的所有h1标题

实际应用场景：

CSS选择器 用途
.product-item .title 商品条目里的标题
.article-content p 文章内容里的段落
.user-info .name 用户信息里的姓名
#sidebar .menu-item 侧边栏里的菜单项

2. 子元素选择器（>）- 选择直接子元素

用大于号(>)连接，只选择直接的子元素：

CSS选择器 说明
div > p 选择div的直接子元素p（不包括孙子元素）
ul > li 选择ul的直接子元素li
.menu > a 选择menu类的直接子元素a

实际应用场景：

CSS选择器 用途
.product-list > .item 产品列表的直接子项目
.navigation > a 导航的直接链接
.comment-list > .comment 评论列表的直接评论

位置选择器

选择特定位置的元素

CSS选择器 说明
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(2) 第2个子元素
:nth-child(3) 第3个子元素

实际应用场景：

CSS选择器 用途
li:first-child 第一个列表项
.product-item:last-child 最后一个商品
tr:nth-child(2) 表格第2行
.comment:nth-child(1) 第一条评论

常见数据采集场景

1. 电商网站 - 商品信息采集

完整示例：

<!-- 网页HTML结构 -->
<div class="product-item">
    <img src="product.jpg" class="product-img">
    <h3 class="product-title">苹果手机</h3>
    <span class="price">￥5999</span>
    <a href="/product/123" class="product-link">查看详情</a>
</div>

对应的CSS选择器：

CSS选择器 获取内容
.product-title 苹果手机
.price ￥5999
.product-img 获取图片
.product-link 获取链接

实战练习案例

案例1：采集商品列表

假设有这样的HTML结构：

<div class="product-list">
    <div class="item">
        <h3 class="name">商品A</h3>
        <span class="price">￥100</span>
        <img src="a.jpg" class="image">
    </div>
    <div class="item">
        <h3 class="name">商品B</h3>
        <span class="price">￥200</span>
        <img src="b.jpg" class="image">
    </div>
</div>

需要的CSS选择器：

CSS选择器 用途
.item 列表css
.item .name 获取商品名称
.item .price 获取商品价格
.item .image 获取商品图片

案例2：采集新闻列表

HTML结构：

<div class="news-list">
    <article class="news-item">
        <h2 class="title">新闻标题1</h2>
        <span class="date">2024-01-01</span>
        <p class="summary">新闻摘要1</p>
    </article>
    <article class="news-item">
        <h2 class="title">新闻标题2</h2>
        <span class="date">2024-01-02</span>
        <p class="summary">新闻摘要2</p>
    </article>
</div>

CSS选择器：

CSS选择器 用途
.news-item 列表css
.news-item .title 新闻标题
.news-item .date 发布日期
.news-item .summary 新闻摘要

调试技巧

在浏览器中测试选择器

  1. 打开要采集的网页
  2. 按F12键打开开发者工具
  3. 按Ctrl+F打开搜索框
  4. 输入CSS选择器（如.product-title）
  5. 看看是否能找到预期的元素

总结

CSS选择器是网页数据采集的基础工具，掌握以下几个要点就能解决大部分采集需求：

  1. 基础选择器：标签选择器、类选择器(.)、ID选择器(#)
  2. 组合选择器：后代选择器(空格)、子元素选择器(>)
  3. 位置选择器：:first-child、:last-child、:nth-child()

记住，多练习是掌握CSS选择器的关键。从简单的网页开始，逐步尝试更复杂的数据采集任务。当遇到问题时，善用浏览器的开发者工具来调试和验证你的选择器。

返回顶部

相关文章