css - 与其他选择器一起选择 MAIN 是否有优势？

Question

在 HTML5 中，main 元素被定义为表示“文档或应用程序的 body 的主要内容” * ，“作者不得在文档中包含多个 main 元素，” * 并且“作者不得将 main 元素作为 article、aside、footer、header 或 nav 元素。” *

对我来说，这意味着它旨在让所有 main 元素始终匹配 body > main:only-of-type { }。但是，在编写 CSS 时，我的直觉是指定类似 body > main { } 的内容。 main{} 是否总是在没有任何其他选择器的情况下完成这项工作，还是应该同时选择其父级或其他一些属性？

* As according to 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 更多的相关性。