正确，html表格元素必须显式添加class属性才能被css类选择器选中；仅在css中定义.xxx而未在html中写class="xxx"，样式完全无效。
HTML表格元素必须显式添加 class 属性才能被CSS类选中
不写 class="xxx"，光在CSS里写 .xxx 是无效的。浏览器不会自动把所有 <table> 或 <code><td> 归入某个类——类名是“标签自带”的错觉，其实是你手动挂上去的。
<ul><li><code><table class="data-table"> 才能匹配 CSS 中的 <code>.data-table
<table>，哪怕CSS写了 <code>.data-table { border: 1px solid #ccc; }，也完全不起作用
class="data-table striped hoverable"，对应三个独立类规则class="DataTable" 和 .data-table 不匹配
td 和 th 单元格样式不能靠父级 table 类直接继承
CSS里写 .data-table td { padding: 8px; } 才生效，而不是 .data-table { padding: 8px; } —— 表格元素本身不渲染内边距，padding 必须落在单元格上。
-
th和td默认无padding，常见漏设项 - 想统一设置所有单元格：用
.data-table td, .data-table th，别漏掉th - 若只对某列设样式，用
td:nth-child(2)或加class到具体单元格更稳妥 - 注意：
border-collapse: collapse要写在table上，否则单元格边框会双倍间距
动态生成表格时，class 必须在 JS 插入 DOM 前就分配好
用 document.createElement('tr') 或 insertRow() 创建行后，得立刻调用 row.classList.add('table-row')，否则后续 CSS 规则不会回溯应用。
- 错误写法：
const row = table.insertRow(); row.innerHTML = '<td>A</td> <td>B</td>';—— 此时row还没 class，且 innerHTML 不会自动补 class - 正确做法：先
row.classList.add('table-row')，再插入单元格；或给每个td单独加class="table-cell" - Vue/React 等框架中，
class绑定要写在模板里（如<td :class="cellClass">），不能依赖 JS 后续 patch <h3>类名冲突和覆盖优先级容易被低估</h3> <p>同一个 <code><td> 同时有 <code>class="urgent error"，而 CSS 里.error { color: red; }和.urgent { background: yellow; }都会生效；但如果都设了color，后定义的规则胜出。- ID 选择器（
#my-table）比类选择器优先级高，慎用 inlineid搞乱样式流 - 避免用
!important解决覆盖问题，它会让调试变成猜谜 - 查样式是否生效？打开 DevTools → Elements → 选中单元格 → 右侧 Styles 面板看哪些规则被划掉、哪些灰掉、哪些生效
- 最隐蔽的坑：外部 CSS 文件加载失败（404），但页面没报错，类名写了等于没写
- ID 选择器（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
