如果我将 CSS 添加到 <style> 元素中，CSS 在 Chrome 中不起作用答案

【问题标题】：CSS not working in Chrome if I add it in the <style> element如果我将 CSS 添加到 <style> 元素中，CSS 在 Chrome 中不起作用
【发布时间】：2018-01-17 12:13:22
【问题描述】：

我有一个通过内联 CSS 应用样式的简单表格，它正在工作。但是当我尝试通过元素将 CSS 添加到文档时，它在 Chrome 中不起作用。我查看了 W3Schools CSS 教程，但找不到解决方案。

我的代码是这样的：

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         tr {
         border: solid 1px black; 
         padding-left: 7px; 
         padding-right: 7px;
         }
      </style>
   </head>
   <body>
      <table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
         <tr style="border: 1px solid black;">
            <th>Available<br>On</th>
            <th>Ids</th>
         </tr>
         <tr>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
            </td>
         </tr>
      </table>
      <br><br>
      <table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
         <tr style="border: 1px solid black;">
            <th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
            <th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
         </tr>
         <tr>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
            </td>
         </tr>
      </table>
   </body>
</html>

https://www.w3schools.com/code/tryit.asp?filename=FIDUIS25NER6

输出：

【问题讨论】：

你不需要指定 type="text/css"。简单的就可以了。
尝试清除缓存或在隐私浏览中打开您的网页，可能您的更改没有打印
究竟什么是“不工作”？为什么只向我们展示应用了内联样式的代码并且在头部使用了style 元素？
检查 DOM，看看你是否真的在那里看到了那个样式标签。右键单击并转到 Inspect，然后找到 Elements 选项卡。
如果一切设置正确，您需要清除 Web 浏览器中的缓存数据。这也发生在我使用 chrome 时

标签： html css google-chrome

【解决方案1】：

将您的 CSS 更改为以下内容。有错别字。

<style>
     th {
     border: 1px solid black; 
     padding-left: 7px; 
     padding-right: 7px;
     }
</style>

如果你想给tr添加边框visit this link.

【讨论】：

【解决方案2】：

改变这个：

border: solid 1px black;

到这里：

border: 1px solid black;

【讨论】：

【解决方案3】：

<style type="text/css">
     th {
     border: solid 1px black; 
     padding-left: 7px; 
     padding-right: 7px;
     }
 </style>

实际上，在您的代码中，您给tr 提供了边框，这没有意义click here to know more.

因此，将上述代码中的 tr 替换为 th 即可。

【讨论】：