<分区>
标签 html css css-selectors
我正在与其他开发人员一起工作，我希望他们在接手特定元素时尽可能地理解我编写的 HTML/CSS 代码。 所以，我有这个简单的片段。
<section>
<div class="twocolumn">
<div>
<p>Hello</p>
<a href="#">Press</a>
</div>
<div>
<p>Nice one!</p>
<a href="#">Click</a>
</div>
</div>
</section>
要针对此代码中的内部元素(这是更好的做法)，请使用从最外层元素(部分)开始的选择器，以便其他开发人员可以这样理解元素的“排列”:
section > div div:nth-child(1) p + a {
...
}
或者我应该像这样使用这些类:
.twocolumn a {
...
}
您认为哪个更容易阅读(对于其他开发人员而言)？每个过程的优缺点是什么？你能举出其他例子吗？
最佳答案
首先，您的选择器不符合要求。 .twocolumn a 本身将匹配两个 a 元素，因为您没有指定只在 div:nth-child(1) 中查找。
除此之外。请记住，CSS 选择器中组合器的唯一目的是在标记中的两个或多个元素之间建立关系。所以兄弟组合器说“这个元素必须是那个元素之后的兄弟”，后代组合器说“这个元素必须包含在那个元素中”，子组合器说“这个元素是那个元素的 child ”。如果您不需要强制两个元素之间的特定关系(通常这来自您对页面结构所做的假设)，那么您可能不需要在选择器中指定那么多元素。
以您的代码段为例:如果您可以保证该结构中的每个内部 div 都有一个 p 后跟一个 a，那么您可以省略 p +。仅当 a 可以出现在其他地方时才需要它，并且您希望确保仅在 a 直接跟在 p 之后才将其作为目标。
接下来，如果你能以某种方式保证每个 section > div 都有 .twocolumn 类，那么你可以只使用类选择器。我发现考虑到类名应该描述的内容，这真的不太可能，但假设是这种情况，那么如果你想选择第一个 a ，你只需要 div:nth- child(1) 至少:
.twocolumn div:nth-child(1) a {
...
}
我无法提供更一般的建议，因为这实际上取决于您的要求和您的工作对象。但我会说你应该保持平衡，即不要完全依赖标记的结构，尽可能使用类和 ID 指向关键元素。正如另一个答案中提到的，您希望避免将 CSS 和 HTML 紧密耦合，导致您不得不更改选择器以反射(reflect) HTML 结构中的任何潜在变化。
但是仍然要考虑结构中的一小部分可能的变化，就像我上面提到的 p + a 示例一样，所以你最终不会过度使用类和不必要地膨胀你的标记.如今，Web 应用程序如此动态，CSS 提供了相当强大的语法供您使用，所以不要害怕使用它并向其他人介绍它的工作原理。
关于html - 我应该多久在 CSS 中使用子/兄弟选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20158184/