在 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
最佳答案
这个问题只是关于Specificity Cascade,当然,如果您必须只有一个 main
元素,那么用类似的样式设置它就足够了:
main {
background:red
}
所以您不需要做更多的事情。但在某些情况下,可以应用其他值来获得更多 Specificity MDN。例如,您希望特定页面具有另一种背景颜色,这样您就可以:
为
main
分配一个类名:<main class="change"> main.change { background:blue; }
或者在他的父级
body
上的一个类:body.change main { background:blue; }
在这两种情况下,您都可以获得比仅设置 main
更多的相关性。
关于css - 与其他选择器一起选择 MAIN 是否有优势?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21312376/