html - 在不受控制的环境中使用 CSS 样板

Question

我正在考虑使用 CSS 样板（kube 或任何其他）来构建我的表单。它们在示例 html 文件中工作得很好，但是如果我想在不受控制的环境中使用（这意味着 css 包含在我的控制之外），它会弄乱这些样式。我想知道是否可以仅将这些样式应用于父容器中的元素（例如 .custom-options）？

Answer 1

如果您只打算使用样板来定位.custom-options容器内的表单，则一种选择可能是使选择器更具体：

body.custom-form-page .custom-options input[type="text"],
body.custom-form-page .custom-options input[type="password"],
body.custom-form-page .custom-options input[type="email"],
body.custom-form-page .custom-options input[type="url"],
body.custom-form-page .custom-options input[type="phone"],
body.custom-form-page .custom-options input[type="tel"],
body.custom-form-page .custom-options input[type="number"],
body.custom-form-page .custom-options input[type="datetime"],
body.custom-form-page .custom-options input[type="date"],
body.custom-form-page .custom-options input[type="search"],
body.custom-form-page .custom-options input[type="datetime-local"],
body.custom-form-page .custom-options textarea,
body.custom-form-page .custom-options select[multiple="multiple"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  font-size: 14px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  border: 1px solid #bbbcc0;
  outline: none;
  padding: 7px 5px;
  position: relative;
  z-index: 2;
 -webkit-appearance: none;
}

这不是很漂亮，但是......更具体的选择器将优先于 wordpress 自己的样式。

!important如果您无法让选择器足够具体，请尝试仅作为最后的手段使用。