如何将内联CSS样式添加到一个元素中，该元素的CSS源是一个文件(而不是内联文本)，您无法对其进行可行的编辑？

Question

我有一个包含各种元素(包括表格)和样式的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*
...

我只想将pure1样式应用于表(即应用所有的styles.css样式，然后让任何适用的纯样式覆盖styles.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

Answer 1

在这个文件中搜索'table‘后，我做了一个复制粘贴：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;
}