子元素的正确样式

问题描述

我有以下代码

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

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

我要去哪里错了？

解决方法

简单地说：

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

问题是，您尝试使用的前三个选择器定位到ID .wpcf7的div内的wpcf7-f5345-p597-ol div ，而您的第四个选择器的目标是一个表单元素在ID wpcf7-f5345-p597-ol的div内。但是我想您正在寻找的目标是div #wpcf7-f5345-p597-ol本身。

,

尝试在CSS ID和类之间没有空格，并且！important可能不是必需的：

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

,

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

.wpcf7 {
    border: 1px solid transparent;
}

因此要“取消”（仅适用于该一种形式），请尝试将其添加到您自己的样式表中（选择器结合了ID和类）：

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

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