BeautifulSoup不解析CSS，display:none元素默认被解析；判断真实可见性需用offsetWidth>0&&offsetHeight>0；提取文本应明确目标：源码文本用textContent，用户可见文本需结合布局与样式计算。
BeautifulSoup默认会解析display:none元素，别指望它自动跳过
很多人以为 BeautifulSoup 像浏览器一样只处理“可见”内容，结果用 soup.find_all("div", class_="hidden-data") 拿到一堆空格和注释——因为 display: none 只是 CSS 字符串，BeautifulSoup 根本不解析样式，它只认 HTML 源码里有没有这个标签。
真正被跳过的，是服务端没生成的元素（比如 Jinja2 的 {% if show %}...{% endif %}），而不是前端 JS 或 CSS 隐藏的。
- 用
soup.select("[style*='display: none']")手动匹配 style 属性里的 display 规则 - 用
soup.find_all(attrs={"hidden": True})捕获带hidden属性的元素 - 对
style属性做字符串解析时注意大小写和空格："display:none"、"display: none"、"DISPLAY:NONE"都得覆盖
js中判断元素是否真正可见，offsetWidth > 0 比 getComputedStyle 更可靠
getComputedStyle(el).display === "none" 或 el.hidden 都不够——前者漏掉 visibility: hidden 和 opacity: 0，后者只管 hidden 属性，不反映 CSS 实际效果。
真正能反映“用户是否能看到”的，是 offsetWidth 和 offsetHeight：只要两者都大于 0，说明该元素在布局中占位且尺寸有效，大概率可见（极少数情况如 transform: scale(0) 除外，需额外判断）。
立即学习“前端免费学习笔记（深入）”；
- 必须同时检查
offsetWidth > 0 && offsetHeight > 0，单看一个可能误判（比如height: 0; overflow: hidden的容器） - 注意
offsetWidth不包含display: none元素，但包含visibility: hidden元素（它仍占空间） - 如果目标是提取“可读文本”，建议先过滤再调用
textContent，避免innerText因渲染状态丢失内容
get_text() 的 separator 参数不是摆设，用错会导致语义断裂
soup.get_text(separator=" ") 看似简单，但把所有嵌套标签间的换行、缩进全压成空格，<p>第一段</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<h2>标题</h2>
<p>第二段</p> 就变成 “第一段 标题 第二段”，段落边界彻底消失。
更糟的是，separator 对空标签（如
<br>、
<hr>）无效，它们不会插入分隔符，导致相邻文本直接粘连。
- 需要保留段落结构时，改用
soup.find_all(["p", "h1", "h2", "li"])分组提取，再各自调用.get_text(strip=True) - 想模拟用户阅读流，用
stripped_strings生成器逐行取文本，比一次性get_text()更可控 -
strip=True会清空所有首尾空白，若需保留原文缩进或空行，请显式设为strip=False并手动处理
textContent 和 innerText 在隐藏处理上根本不是一回事
用 el.textContent 能拿到 display: none、hidden、script、style 里的所有文本；而 el.innerText 会跳过这些，还会受字体、换行、CSS 渲染影响——比如某些字体下连续空格被压缩，innerText 就返回错误长度。
如果你的目标是“提取源码中所有文本节点”，选 textContent；如果是“模拟用户复制粘贴看到的内容”，才考虑 innerText，但得接受它不稳定。
-
textContent是 DOM 树原始文本，性能高、无副作用，适合数据抓取 -
innerText触发重排，慢，且在 iframe 或跨域场景下可能抛SecurityError - 动态渲染内容（如 React/Vue 生成的）必须等 JS 执行完再取
textContent，否则拿不到真实文本
真正麻烦的不是怎么取，而是你得先明确：要的是源码里的文本，还是渲染后用户眼中的文本？前者靠 textContent + 选择器过滤，后者得结合 offsetWidth 和样式计算。混着用，结果必乱。
