今天在进行css标签解析的时候遇到一个不得其解的困惑，表现出来的现象是：一组<table>标签中添加的<br>标签也被解析为<table>了。
概况
有html代码如图1:
图1.png
我想要获取的元素在所选中的
<table>标签中，我先是按照个人理解，通过如下代码(node)去获取的:
let fs = require('fs');
let cheerio = require('cheerio');
let data = fs.readFileSync('example1.html');
let $ = cheerio.load(data);
let table = $('body > div > div > table > tbody > tr:nth-child(2) > td > table
:nth-child(4)')
table.attr();
因为我根据<table>标签往下数，是第四个，所以用的table :nth-child(4),但显示的属性结果如图2
图2.png
通过最后显示的属性可知，获取到的并不是我所预期的那个table，自然后续也没法拿到目标元素的值。
和代码对比可知，获取到的是上面那个table。
那么，为什么我所认为的“第三个table”，在程序看来却是“第四个”呢？
追溯
- 用chrome浏览器打开html，打开devtool，
- 在
selector工具选中目前table，然后右键点击Elements中被选中的table代码，再点击“Copy -> Copy selector” - 在
Console中粘贴得到如下结果：
body > div > div > table > tbody > tr:nth-child(2) > td > table:nth-child(6)
可知目前table是document当前路径下的第六个child，正如图1所示的第六个红色箭头。
在Console中挨个查询的结果如图3
图3.png
困惑和瞎猜
为什么css树会把<br>标签视为和<table>一样的child节点呢？
或许说它只关心它是child节点，而不关心它是不是真的<table>？
又或是这和nth-child的用法有关？因为就在写的时候我试着查了一下图1椭圆形标注的table，果然是table:nth-child(12)，这么说其中的<span>、<ol>一样被视为child节点了。
希望有人可以解惑，也欢迎交流。
