使用不同插件生成的样式表

Question

前提：我现在正在实习，所以我不是专业人士。

您好开发人员，我需要您的帮助。 我从另一个人那里继承了一项工作，我必须重新设计 3 个联系表格的样式。

问题是：在Wordpress中用Contact form 7生成了两个表格，最后一个是用Woocommerce完成的。 使所有三种形式保持一致的最佳方法是什么？ 我是否用自己的样式覆盖了主题的样式？ 有更好的解决方案吗？

提前致谢。

Answer 1

这个问题的答案是识别公共字段。

在大多数情况下，您可以为 input 和 input[type="X"] 字段添加样式。

这意味着不仅这些表格是一致的，而且其他所有的表格都是一致的。

例如

input {
    background: #f1f1f1;
    padding: 5px;
}

input[type="submit"] {
    border-radius: 20px;
    background: #333;
    color: white;
}

这将设置所有输入的样式，然后还将输入以提交类型作为目标。

在大多数情况下，由于样式的重量，这些样式将被忽略，因此可能需要将它们嵌套在类和 div 中。或者只是使用 !important 覆盖它们。

例如

//Overiding with !important
input {
    background: #f1f1f1 !important;
    padding: 5px !important;
}

//Nesting to give extra value
html body .container form input[type="submit"] {
    border-radius: 20px;
    background: #333;
    color: white;
}

有关赋予类/id 的/元素here 的权重的更多信息。

有关输入类型的更多信息here。