html - 不是直系后代的 child 的 CSS 语法？

Question

我想问的问题是，“引用非直接子元素的子元素是否可能/良好做法？”

例如，如果您有这样的 HTML:

<form class="formation">
   <p>
      <span>
         <input class="phone input">
      </span>
   </p>
   <p>
      <span>
         <input class="text input">
      </span>
   </p>
</form>

并且您希望在 CSS 中仅引用特定表单中的输入，因此您调用表单类后跟输入类而不引用其间的元素，如下所示:

.formation .input {
    width: 10px;
}

这能正常工作吗？

我倾向于认为我已经在元素上这样做了，而且效果很好，但通常我指的是介于两者之间的所有 child (因为我没有深入探讨)。但我目前正在为一个似乎不遵守此规则的 wordpress 网站进行媒体查询。这是不好的做法吗？或者这是完全错误的？感谢您的帮助!

Answer 1

是的，这样做不仅可行而且值得推荐。根据需要为你的 css 规则选择你的选择器，以减少对你的标记结构的依赖。这不仅出于性能原因是明智的，它还可以为您节省很多工作，以防您的标记发生变化，例如稍后您注意到不再需要 span 并且将其删除以保持标记尽可能干净。如果您使用 .input 的完整 DOM 路径，您还必须调整您的 css 选择器。如果将来出于任何原因您的

应该变成

，则相同。

只需确保您为规则提供尽可能多的 DOM 上下文，以免将您的规则应用于其他上下文中的相同分类元素(如果您有任何规则，并且如果您想为以下元素应用一组不同的样式规则)它)。

关于html - 不是直系后代的 child 的 CSS 语法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24250331/