Problèmes avec le générateur de thème Divi dans WordPress

Question

Bonjour à tous.

J'essaie de mettre mon code CSS sur un formulaire à l'aide d'un outil Wordpress appelé Divi Builder. Mais le code que j’ai entré était complètement différent de celui que j’avais écrit. J'ai presque tout essayé mais rien ne fonctionne. Si vous pouvez m'aider, je mettrai mon code CSS ici et je l'apprécierais vraiment.

Code CSS que j'ai créé :

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

C'est ce que ça devrait être

Voici à quoi ça ressemble

Voici quelques erreurs que j'ai rencontrées

Encore une fois, toute aide serait grandement appréciée.

J'ai essayé de réécrire tout le code CSS, j'ai essayé d'utiliser des balises pour insérer le code HTML.

Answer 1

Divi a une tonne de règles CSS internes, dont la plupart ont des sélecteurs très spécifiques, sont constituées de nombreuses combinaisons/classes imbriquées/ID/balises, et contiennent souvent même !important, ce qui rend leur remplacement beaucoup plus difficile. Il est probable que vos règles CSS soient remplacées par des règles Divi aussi complexes.

Il faut utiliser les outils du navigateur sur les éléments pour voir quelles règles divi s'appliquent à eux, puis créer les règles à l'aide d'un sélecteur avec une spécificité plus élevée (google "spécificité css" si vous ne voyez pas de quoi je parle) . Si ces règles divi contiennent !important，您别无选择，只能在规则中使用 !important, vous n'avez pas d'autre choix que d'utiliser

dans les règles pour remplacer les règles divi. 🎜