Probleme mit dem Divi-Theme-Builder in WordPress

Question

Hallo an alle.

Ich versuche, meinen CSS-Code mit einem Wordpress-Tool namens Divi Builder in ein Formular einzufügen. Aber der Code, den ich eingegeben habe, war völlig anders als der Code, den ich geschrieben habe. Ich habe fast alles versucht, aber nichts funktioniert. Wenn ihr helfen könnt, füge ich meinen CSS-Code hier ein und würde mich sehr darüber freuen.

CSS-Code, den ich erstellt habe:

._form-content {
  display: flex;
  flex-direction: row;
  gap: 7px;
}
input {
  display: flex;
  width: 252px;
  height: 34px;
  border-radius: 8px;
  fill: #f9f9f9;
  border: 1px solid #b0b0b0;
}
input:focus {
  outline-color: #821313;
}
button {
  width: 286px;
  height: 34px;
  border-radius: 10px;
  background-color: #821313;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  transition: all 0.3 ease;
}
button:hover {
  background-color: #5c0d0d;
}

So soll es sein

So sieht es aus

Hier sind einige Fehler, auf die ich gestoßen bin

Auch hier wäre ich für jede Hilfe sehr dankbar.

Ich habe versucht, den gesamten CSS-Code neu zu schreiben und Tags zu verwenden, um den HTML-Code einzufügen.

Answer 1

Divi 有大量内部 CSS 规则，其中大多数都有非常具体的选择器，由许多组合/嵌套类/ID/标签组成，甚至通常包含 !important这使得覆盖它们变得更加困难。您的 css 规则很可能会被如此复杂的 Divi 规则覆盖。

您必须在元素上使用浏览器工具来查看哪些 divi 规则适用于它们，然后使用具有更高特异性的选择器创建规则（如果您不知道我在说什么，请谷歌“css 特异性”） ）。如果这些 divi 规则包含 !important，您别无选择，只能在规则中使用 !important 来覆盖 divi 规则。