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

这会正常工作吗？

我倾向于认为我已经在项目中完成了这项工作并且它已经正常工作但通常我会提到中间的所有孩子（因为我没有那么深入）。但我目前正在为wordpress网站进行媒体查询，但似乎并不尊重此规则。这是不好的做法吗？或者这是彻头彻尾的不正确？谢谢你的帮助！

Answer 1

是的，这样做不仅可行，而且也是可取的。根据需要选择适合您的css规则的选择器，以减少对标记结构的依赖性。这不仅仅是出于性能原因的明智之举，它还可以为您节省大量工作，以防您的标记发生变化，例如：稍后您会注意到不再需要跨度，并将其删除以使您的标记尽可能干净。如果你使用.input的完整DOM路径，那么你还必须调整你的css选择器。如果将来出于任何原因，您的＆lt; p＆gt;应该成为＆lt; div＆gt;。

请确保您为规则提供尽可能多的DOM上下文，以便不将规则应用于其他上下文中的相同分类元素（如果您有任何规则，并且如果您想要应用不同的样式规则集它）。

Answer 2

是的，它会正常工作。使用.form .input得到的内容允许两个类之间有任意数量的中间节点。

如果你有.form > .input，那么你的CSS根本就不匹配。 >是“直系后代”选择器，所以

.form .input { color: green }
.form > .input { color: red }

<div class="form">
   <div class="input">This is red</div>
   <div class="whatever">
      <div class="input">This is green</div>
   </div>
</div>

不直接后代的儿童的CSS语法？

2 个答案: