子元素的正确样式答案

【问题标题】：correct styling of child element子元素的正确样式
【发布时间】：2020-12-24 18:20:33
【问题描述】：

我有以下代码

<div role="form" class="wpcf7" id="wpcf7-f5345-p2959-o2" dir="ltr" lang="en-US">

这与一个联系表格有关，可以通过向下滚动到页面底部来查看。您会注意到“表单”顶部有一个边框，我想将其删除。

当我调试它时与之相关的样式包括以下内容

.scheme_dark .wpcf7
border:1px solid #bcd;

我正在尝试删除边框，但事实证明这真的很痛苦。问题是我认为边框附加到.wpcf7 类，该类与我网站上的许多表单相关联，它只是我想要删除边框的id 为 wpcf7-f5345-p2959-o2 的表单。

我已经尝试了以下所有方法，但没有任何运气

#wpcf7-f5345-p597-ol > .wpcf7{
    border:0px!important;
}

#wpcf7-f5345-p597-ol .wpcf7{
    border:0px!important;
}

#wpcf7-f5345-p597-ol .scheme_dark .wpcf7{
    border:0px!important;
}

#wpcf7-f5345-p597-o1 form{
    border:0px!important;
}

以上都没有移除边框。

如果我只是使用

.wpcf7{
    border:0px!important;
}

然后它会删除边框，但也会从我的所有表单中删除

我哪里错了？

【问题讨论】：

发布足够多的“minimal reproducible example”代码 - 包括具有相同类的另一个表单 - 让我们重现您的问题。
我不确定我是否可以，因为代码是由 wordpress 插件生成的，如果有帮助，我可以发布网站吗？
不，获取网站代码，将其剥离到让我们重现问题的绝对最小值，然后发布。您的问题在于 html 和 css，而不是 php 或服务器端处理（据我从您的问题中可以看出），因此没有任何 php 是相关的。

标签： css wordpress contact-form-7

【解决方案1】：

简单地说：

#wpcf7-f5345-p597-ol
    border:0px!important;
}

问题是，您尝试的前三个选择器以 .wpcf7 div 在 ID 为 wpcf7-f5345-p597-ol 的 div 为目标，而您的第四个选择器以 div 内的表单元素为目标ID wpcf7-f5345-p597-ol。但我猜你正在寻找的是针对 div #wpcf7-f5345-p597-ol 本身。

【讨论】：

感谢您的评论 :) 遗憾的是我刚刚尝试过，但它并没有删除边框 :(

【解决方案2】：

尝试在 CSS ID 和类之间不留空格，!important 可能不是必需的：

#wpcf7-f5345-p597.wpcf7{
    border:0px;
}

【讨论】：

不，遗憾的是没有，仍然有边框:(谢谢你的建议
如果添加 !important 会怎样？

【解决方案3】：

CF7插件的样式表中有这个CSS规则（检查代码时可见）：

.wpcf7 {
    border: 1px solid transparent;
}

所以要“取消”它（仅针对那个表单），请尝试将其添加到您自己的样式表中（选择器结合了 ID 和类）：

#wpcf7-f5345-p597-o1.wpcf7 {
    border: none;
}

P.S.：请注意，ID 的最后一个字符是 1，而不是 l，就像您的问题和其他答案中的一些示例一样。

【讨论】：