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 仅当您无法获得足够具体的选择器时才作为最后的手段使用。