用其他选择器选择MAIN是否有优势？

Question

在HTML5中，main元素定义为“文档或应用程序 * 的body的主要内容”，“作者不得包含多个main {文档中的{1}}元素，“ * 以及”作者不得将main元素包含为article，aside，{{1}的后代}，footer或header元素。“ *

对我而言，这意味着所有nav元素始终与main匹配。但是，在编写CSS时，我的本能是指定body > main:only-of-type { }之类的东西。 body > main { }是否会在没有任何其他选择器的情况下完成工作，或者是否应该选择其父级或其他属性？

  

*根据Section 4.5.14 of HTML5 W3C Candidate Recommendation, as published on 6 August 2013

Answer 1

这个问题只是关于Specificity ^Cascade ，当然如果你必须只有一个main元素足以用以下方式设置它：

main {
  background:red
}

所以你不需要做更多的事情。但是在某些情况下可以应用其他值来获得更多Specificity ^MDN 。例如，您希望特定页面具有其他背景颜色，以便您可以：

• 将类名指定给main：

  <main class="change">
  
  main.change {
    background:blue;
  }
  

• 或他父母body上的一个班级：

  body.change  main {
    background:blue;
  }
  

在这两种情况下，您获得的更多相关性不仅仅是设置main。