Question

在我的wordpress网站上确定是否有可能忽略css样式时，拼命寻求帮助？

我的朋友在开始时想让我帮我创建他的新公司的网站我想拒绝，但它是一个好朋友，所以我想＆＃34;我将安装wordpress，点击几下并完成＃34 ;。现在我已经找到了多少我低估了前端开发人员以及他们通过什么地狱来确保网站在这个... css的帮助下的响应能力。

我为这个介绍道歉但是几个小时后我试图用html制作一个非常简单的响应表。事实证明我正确地做了一切，但我的wordpress皮肤改变了我想要使用的几乎所有标签的风格，例如table，tr，td和to＆＃34; reset＆＃34;这个元素的CSS样式我的html片段而不是干净漂亮的HTML是HELL！

每个html元素都继承自主题，我必须＆＃34;重置＆＃34;它到＆＃34;默认＆＃34;值。

＆＃13;

<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;

＆＃13;

我会就如何处理它采取一切建议，以便我的帖子不会继承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

从Theme中继承wordpress页面上的css

1 个答案: