教程：http://www.w3school.com.cn/cssref/css_selectors.asp

教程上的语法和正则表达式一样，都是一些表达的基本单元。在实际业务使用当中，还得把它们结合起来用。

目标代码片段如下：源码地址

<div class="el"> 
 <p class="t1 "> 
 <em class="check" name="delivery_em" onclick="checkboxClick(this)"></em> 
<input class="checkbox" type="checkbox" name="delivery_jobid" value="95956655" jt="0" style="display:none" /> 
 <span> 
 <a target="_blank" title="Go语言开发工程师" href="[https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0](https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0)" onmousedown=""> 
 Go语言开发工程师 </a> 
 </span> 
</p> 
|  | <span class="t2"><a target="_blank" title="杭州顺网科技股份有限公司" href="https://jobs.51job.com/all/co2387548.html">杭州顺网科技股份有限公司</a></span> 
 <span class="t3">杭州</span> 
 <span class="t4">1-2万/月</span> 
 <span class="t5">06-26</span> 
 </div>

需求：

选出该页中所有的详情页面地址,即 https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0
实现：

for( let i of document.querySelectorAll('p[class="t1 "]')){
    let url = i.querySelector("a").getAttribute("href")
    console.log(url)}

选出该页所有的时间，即示例片段中的 06-26

for(let i of document.querySelectorAll('p[class="t1 "]+span+span+span+span')){
    console.log(i.innerHTML)
}

选出职位信息
源码地址：https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0

<div class="bmsg job_msg inbox">
                        <p>工作职责:</p><p>1、采用Go语言(Golang)开发高可用、 高并发的后端组件、服务；</p><p>2、保证系统的效率和可靠性以及代码质量和可维护性。</p><p>任职资格:</p><p>1、全日制本科及以上学历，计算机相关专业毕业；</p><p>2、熟练掌握Go语言，对代码基本规范有清晰的认识，1年以上Go语言项目开发经验；</p><p>3、有丰富的UNIX/Linux环境下的编程经验，熟悉多线程进程及网络开发；</p><p>4、深入理解计算机网络和现代操作系统；</p><p>5、 对服务端相关技术和架构（通讯、计算、存储）有较深刻的理解；</p><p>6、有良好的编程习惯，包括好的设计文档，单元测试，代码审查；</p><p>7、有大规模分布式项目, 高性能大并发项目经验优先；</p><p>8、有ADX和DSP系统相关开发经验的优先。</p>                        
                                                <div class="mt10">
                                                        <p class="fp">
                                <span class="label">职能类别：</span>
                                                                    <span class="el">软件工程师</span>
                                                                </p>
                                                                                </div>                      
                        <div class="share">
                            <a track-type="jobsButtonClick" event-type="6" class="a" href="javascript:void(0);" id="fenxiang">分享</a>
                            <div class="shareBox">
                                <div id="weixinMa_fx" style="display:none;"><img width="198" height="198" alt="二维码" src="https://jobs.51job.com/comm/qrcode.php?url=https%3A%2F%2Fm.51job.com%2Fsearch%2Fjobdetail.php%3Fjobid%3D95956655"></div>   
                                <a class="icon_b i_weixin" href="javascript:;" onclick="weixinMa();">微信</a>
                                <a class="icon_b i_mail" target="_blank" href="http://my.51job.com/sc/sendjob_tofriend.php?jobid=95956655&amp;coid=2387548&amp;divid=0">邮件</a>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>

选出所有的职位信息：

for( let i of document.querySelectorAll("div[class='bmsg job_msg inbox']>p")){
    console.log(i)}

这个选择器的注意点是，div > p选择所有父元素为div的p元素。
同理可得，div[class='bmsg job_msg inbox']>p,是选择所有父元素是div[class='bmsg job_msg inbox']的p元素。

还可以选择父类元素

需求：想拿到文本信息，已知 i1 是唯一的。

<span class="sp4"><em class="i1"></em>无工作经验</span>

通过父元素来获取：

document.querySelector("em[class='i1']").parentNode.innerText

通过父元素获取子元素
https://www.jb51.net/article/51158.htm

CSS 选择器的操作

CSS 选择器的操作

还可以选择父类元素

推荐阅读更多精彩内容