Question

我正在使用StackEdit（这太棒了！）它具有导出文档的HTML文件的功能该文档使用默认的CSS File。

例如，我使用以下代码下载了HTML文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>

<p>We’re dealing with…</p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

我想要做的是改变背景颜色，如果'div'元素带有ID：“container”而不改变他的任何其他属性。

我只能访问基本模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>

我怎样才能以最简单的方式做到这一点？

注意：

我只能编辑模板。
我想将颜色更改为f6f7f9。
我希望保留元素的任何其他属性。

更新

尝试了以上示例代码的建议：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>

<p>We’re dealing with…</p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

它不起作用，它改变了文档的整体外观您可以尝试创建本地HTML文件并查看。 - ＆GT;我错了。它有效！

Answer 1

如果您只能编辑模板，请使用如下内联样式：

<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>

或者由于您的模板是整个页面，您可以在头部添加自定义样式并使用！important指令覆盖任何其他自定义样式。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>
            <%= documentHTML %>
        </title>
        <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
        <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
        <style type="text/css">
            .container {
                background-color:#f6f7f9 !important;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <%= documentHTML %>
        </div>
    </body>

</html>

Answer 2

将样式background-color:yellow;添加到container div。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:yellow;"><%= documentHTML %></div>
   </body>
</html>

Answer 3

尝试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><%= documentTitle %></title>
  <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
  <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
  <style>
  .container
  {
    background:#f6f7f9;
  }
  </style>
 </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;">    <%= documentHTML %></div>
   </body>
</html>

Answer 4

试试这个：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
   </body>
</html>

从HTML更改“Div”属性

更新

4 个答案: