html - 从主题继承 wordpress 页面上的 css

Question

急切地寻求帮助来确定是否可以忽略我的 wordpress 网站上的 css 样式？

我的 friend 一开始找我帮忙创建他的新公司的网站，我想拒绝，但这是一个好 friend ，所以我想“我会安装 wordpress，点击几下就完成了”。现在我意识到我低估了前端开发人员，以及他们在这个...css 的帮助下为确保网站的响应能力所经历的 hell 。

对于这个介绍，我深表歉意，但几个小时以来，我一直在尝试用 html 制作一个非常简单的响应式表格。事实证明，我做的一切都是正确的，但我的 wordpress 皮肤改变了几乎所有我想使用的标签的样式，例如 table、tr、td 并为这个元素“重置”我的 html 片段的 css 样式干净漂亮的 html 是 hell !

每个 html 元素都继承自主题，我必须将其“重置”为“默认”值。

<table style="border: none; vertical-align: initial; table-layout: fixed; padding: 10px 10px 10px 10px;" cellpadding="5">
   <tbody>
      <tr>
         <td style="border: none;">
            <table style="border: none !important; vertical-align: middle; border-collapse: collapse; border-color: #ddddddd;" cellpadding="5">
               <tbody style="border: none;">
                  <tr>
                     <th style="border-color: #21288f; text-align: center;" colspan="2"><span style="border: none; color: #21288f; text-align: center;"> FACILITY MANAGEMENT </span></th>
                     <th style="border: none;"></th>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em; height: 10%;" valign="middle">
                     <td style="border: none; padding: 10px 10px 10px 10px; vertical-align: middle; display: block margin-bottom: 0em;" valign="middle"><img style="min-width: 30px; min-height: 30px; ;vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" valign="middle"><span style="color: #21288f;">TEXT1</span></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" rowspan="6" valign="middle"></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT2</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT3</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle;">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
               </tbody>
            </table>
            &nbsp;
         </td>
         <td style="border: none;"><img class="wp-image-630 aligncenter"  alt="" width="322" height="255" />
            <img class="wp-image-631 aligncenter"  alt="" width="311" height="240" />
         </td>
      </tr>
      <tr>
         <td style="border: none;"></td>
         <td style="border: none;"></td>
      </tr>
   </tbody>
</table>
&nbsp;

我会听取所有关于如何处理它的建议，这样我的帖子就不会继承 wordpress 主题。

Answer 1

我建议首先查看主题文档，您可以提供站点链接或更具体的信息。

也许主题为子主题提供了一些选项或教程？

无论如何。内联 css 属性被全部接管，但它们可能不是必需的(有时它们是)

看看 css 特异性:https://css-tricks.com/specifics-on-css-specificity/

您需要找出正在使用哪些 CSS 选择器来设置表格样式 (browser dev tools)，然后制作更强大的选择器来覆盖它们，即使它们在它们之前被解析也是如此。

然后您可以将它们放入 <style> 中表格之前或 css 文件中其他地方的标记不会被更新覆盖(Child theme)

更新:在查看https://demo.themegrill.com/spacious/wp-content/themes/spacious/style.css 之后在主题演示中，表格样式从第 54 行开始

你应该可以用

覆盖它

body table {
/* original values
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 1.5em;
    width: 100%;
*/

}

body th {
/* original values
    font-weight: bold;
    border: 1px solid #EAEAEA;
    padding: 6px 10px;
*/
}

body td {
/* original values
    border: 1px solid #EAEAEA;
    padding: 6px 10px;
*/
}

body caption, 
body th, 
body td {
/* original values
    text-align: left;
*/
}

最简单的方法是将该 css 放入主题自定义 CSS 选项中，因为这是此处推广的功能:https://themegrill.com/themes/spacious/#all-features