如何使用 CSS 类来设置元素的样式？答案

【问题标题】：How to Use a CSS Class to Style an Element?如何使用 CSS 类来设置元素的样式？
【发布时间】：2022-11-21 02:59:21
【问题描述】：

表的样式<table style="width:100%; line-height:1px"> 重复了：我尝试创建一个.scss文件并添加类样式并在 HTML 中使用它

<div style="display: flex;">
    <table style="width:100%; line-height:1px">
        <thead>
            <tr>
                <th>A</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
            </tr>
        </tbody>
    </table>

    <table style="width:100%; line-height:1px">
        <thead>
            <tr>
                <th>B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>200</td>
            </tr>
        </tbody>
    </table>
</div>

我将这部分添加到.scss* 文件，我从中删除了样式表格标签但这对我不起作用

table {
width:100%;
line-height:1px;
}

【问题讨论】：

也许你需要使用 .css 而不是 .scss，CSS 很容易被浏览器读取，.scss 而不是需要一些 npm 包来将 SCSS 代码转换为 CSS ...从示例代码中，我看到你不需要为了过于复杂，只需通过将扩展名更改为.css 来使用 CSS，希望它能正常工作。这里有一些差异的例子sass-lang.com/guide
是的，浏览器读取 CSS 文件，因此您需要使用编译器将 scss 文件编译为 css。 Dart SASS 是一个，node-sass 是另一个。但请选择最适合您的工作流程的工具。还要确保如果您使用的是自定义代码最后出现的 CSS 框架，否则默认表格样式将覆盖您的自定义。

标签： html css sass

【解决方案1】：

使用简单的 css 启动而不是 sass 可能更容易（如评论中所述，将样式文件扩展名更改为 .css）否则你的问题可能来自不同的事情

也许您指向样式表的链接不起作用：确保您在 html 文件的头部有该行

&lt;link rel='stylesheet' href='YourStylesheetName.css'&gt;

您还可以通过将它们添加到两个样式标签之间的 html 文件中来设置 css 属性

<style>
table {
width:100%;
line-height:1px;
}
</style>

也许代码有效，但不是您预期的结果：您可以单击 F12 查看网页每个元素的 css 属性。

希望这有所帮助。

【讨论】：