Azure App Service Editor中table-class样式不生效问题求助

在Azure App Service Editor中开发时，给表格设置class="table-class"后，该类的样式完全不生效，表格仅显示默认样式；但替换为其他类名（比如custom-table）时，样式就能正常生效，无法定位问题根源。

提供的代码 #

CSS代码 #

.table-class {
  position: absolute;
  display: block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  z-index: 10000000;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5%;
  color: white;
}

.table-class td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.table-class tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.6);
}

HTML代码 #

<table class="table-class">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

排查方向与解决办法 #

1. 修正CSS选择器错误
   你的CSS里.table-class td, th这个选择器存在语法问题——这里的th没有和.table-class关联，样式会应用到所有全局th元素，而非.table-class表格下的th。改成以下写法：

   .table-class td,
   .table-class th {
     border: 1px solid #dddddd;
     text-align: left;
     padding: 8px;
   }
   

2. 检查类名冲突
   打开浏览器开发者工具（F12），选中表格元素查看「样式」面板：

   • 如果.table-class的样式被划掉，说明有其他优先级更高的同名样式（比如框架自带的类）覆盖了它。
   • 解决办法：要么更换不重复的类名，要么提高选择器优先级（比如用body .table-class，临时加!important测试，不推荐长期依赖）。

3. 验证CSS加载顺序
   确保你的自定义CSS文件在框架样式（比如Bootstrap）之后加载，这样你的样式才能覆盖框架默认样式。

4. 清除缓存
   在Azure App Service Editor里刷新页面，或在浏览器按Ctrl+F5强制刷新，清除编辑器和浏览器缓存，确保加载最新的CSS文件。

5. 核对类名拼写与大小写
   CSS对大小写敏感，确认CSS中的类名和HTML里的完全一致，比如Table-Class和table-class会被识别为两个不同的类。

内容的提问来源于stack exchange，提问作者math_ist