今天在进行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”，在程序看来却是“第四个”呢？

追溯

1. 用chrome浏览器打开html，打开devtool，
2. 在selector工具选中目前table，然后右键点击Elements中被选中的table代码，再点击“Copy -> Copy selector”
3. 在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节点了。

希望有人可以解惑，也欢迎交流。