如何将内联 CSS 样式添加到 CSS 源是您无法编辑的文件（而不是内联文本）的元素？答案

【问题标题】：How to add inline CSS styles to an element for which the source of the CSS is a file (and not inline text) that you can't feasibly edit?如何将内联 CSS 样式添加到 CSS 源是您无法编辑的文件（而不是内联文本）的元素？
【发布时间】：2018-01-04 20:33:03
【问题描述】：

我有一个包含各种元素（包括表格）和样式的 html 页面 (index.html) 和 css 页面 (styles.css)：

index.html:

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        ...
        <table>
        ...
    </body>
</html

styles.css：

...
*various styles*
...

我想仅将纯 [1] css 样式应用于表格（即应用所有 styles.css 样式，然后让任何适用的纯样式覆盖 style.css 的那些）。

像这样（这样纯 CSS 不会影响任何其他元素）：

index.html:

...
<table class="pure-table" css-src="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
...

我还没有找到可行的方法来做到这一点。我知道我可以梳理纯 CSS 文件并将样式复制/粘贴/调整到 styles.css 直到看起来相似，但似乎应该有更好的方法（某种本地范围的 CSS）。

[1]https://purecss.io/start/

【问题讨论】：

您是否在使用任何其他样式库，例如 bootstrap？如果没有其他名为等于您的实际 css 文件样式的类，您应该在标题中包含 css 文件，或者您可以创建一个自定义 css 文件，从纯 css 复制粘贴您想要的属性并将其添加到标题。顺便说一句：css-src 不存在。
我只是在使用styles.css。在标题中包含纯 css 文件（除了 styles.css）的问题在于它会影响页面上的所有其他元素。我可以做到这一点（从纯复制粘贴我想要的属性），但我不确定这是否是一个好方法，知道我的用例。我知道 css-src 不存在，我只是用它来表示我在语义上的意思。对不起，我应该说得更清楚。

标签： html css jekyll github-pages yui-pure-css

【解决方案1】：

在此文件中搜索“表格”后，我进行了复制粘贴：https://unpkg.com/purecss@1.0.0/build/pure.css。它归结为以下CSS，可以这样使用，因为我认为它不会破坏其他任何东西。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em;
}

.pure-table td:first-child,
.pure-table th:first-child {
    border-left-width: 0;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-odd td {
    background-color: #f2f2f2;
}

.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody > tr:last-child > td {
    border-bottom-width: 0;
}

.pure-table-horizontal td,
.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-horizontal tbody > tr:last-child > td {
    border-bottom-width: 0;
}

【讨论】：

谢谢！这就是我最终做的。不过，我仍然觉得有更好的方法。