最常用的是父容器+子元素选择器（如ul li），避免li li或全局li；推荐ul.my-list li限定范围；隔行变色用:nth-child(odd)；html5可省略但不建议；js动态插入优先用documentfragment或事件委托。
怎么给多个 <li> 标签统一加样式
直接用 CSS 选择器批量控制，别一个个写 id 或重复内联样式。最常用的是父容器 + 子元素选择器，比如 ul li 或 ol li，这样所有子 <li> 都会生效。
常见错误是写成 li li（误以为能选中所有 <li>），其实它只匹配嵌套在 <li> 里面的 <li>；或者漏掉父级约束，导致全局 <li> 全被改，影响导航栏、表单等其他地方。
- 优先用
ul.my-list li这类带 class 的限定选择器，避免污染其他列表 - 如果要隔行变色，用
ul li:nth-child(odd)，注意:nth-child是按标签顺序算，不是按<li>个数 - 内联样式（
style="..."）优先级高于外部 CSS，调试时看到没生效，先检查有没有意外的style属性
<li> 能不能不写闭合标签
HTML5 允许省略 ，浏览器会自动补全，但前提是结构清晰——比如不能在 <li> 里直接塞另一个 <li>，也不能混着 <p></p>、<div> 不闭合地乱放。
<p>实际项目里不建议省略，尤其团队协作或后续要加 JS 操作时：<code>document.querySelectorAll('li') 在某些边缘结构下可能漏节点；Prettier、ESLint 等工具也会报 warning。
立即学习“前端免费学习笔记（深入）”；
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
- 服务端渲染或模板引擎（如 Jinja、EJS）里，省略闭合容易引发嵌套错位，debug 成本高
- 如果用了
display: flex或grid布局，DOM 结构不完整可能导致布局塌陷，尤其在 Safari 中更敏感 - 写
<li>内容</li>全写出来，比赌浏览器“智能修复”更稳
多个 <li> 怎么动态插入（JS 场景）
别用 innerHTML += 拼接，每次执行都会触发重排重绘，性能差，还可能 XSS（如果内容来自用户输入）。
正确做法是批量创建后一次性挂载。现代浏览器对 DocumentFragment 支持很好，比反复操作 appendChild 更高效。
- 用
Array.from({length: 5}, (_, i) => <li>Item ${i+1}</li>).join('')生成字符串再设innerHTML也行，但记得先escape用户数据 - 如果要绑定事件，推荐事件委托：
ul.addEventListener('click', e => { if (e.target.tagName === 'LI') {...} })，不用每个<li>单独加监听 - 用
insertAdjacentHTML('beforeend', htmlStr)比innerHTML +=稍安全，但仍需过滤 HTML
为什么有些 <li> 不显示或错位
大概率是 CSS 的 display 或 list-style 干扰了默认行为。比如设了 display: block 本身没问题，但若父 <ul></ul> 被设成 display: flex，而没给 <li> 设 flex: 1，就会挤成一行或溢出。
还有种隐蔽情况：CSS 里写了 li::before { content: ""; } 却没配 list-style: none，结果默认序号还在，伪元素又叠了一层，视觉上就错乱。
- 检查 computed styles，看
display是否被意外改成none或inline（<li>默认是display: list-item） - 用浏览器开发者工具禁用
list-style-type和list-style-position，确认是不是序号定位干扰了布局 - Flex/Grid 容器里的
<li>，记得它只是普通子元素，不再有“列表项”语义，margin和padding行为和<div> 一致 事情说清了就结束</div>
