我们都知道
CSS selector的优先权是:
inline style > ID > Class > Tag
◎ inline style 就是内嵌在各标签 里的“style="..."” 这个attribute
◎ ID 就是 “井字号 (#)”开头的Selector
◎ Class 就是 “点 (.)”开头的Selector
◎ Tag 就是像“h1”、“span”、“a”这种用Tag来做依据的Selector
但是以下为什么Tag优先权会比Class来得高呢?
<style>
.myclass { font-size: 20px; }
ul#aaa li { font-size: 15px; }
li.myclass { font-size: 10px; }
ul.bbb li { font-size: 25px; }
ul { font-size: 30px; }
</style>
<ul id="aaa" class="bbb">
<li id="myli" class="myclass">Hello</li>
</ul>
优先级是:
ul#aaa li > ul.bbb li > li.myclass > .myclass > ul
“ul”的“font-size”是继承而来的,优先权最低这无庸置疑,
但是为什么“.myclass”的优先权居然比“ul#aaa li”、“ul.bbb li”和“li.myclass
”还来得低呢?
尤其是“ul#aaa li”和“ul.bbb li”
明明这两个Selector是Tag层级的,为什么优先权会比Class层级的“.myclass” (还有“
li.myclass”)还来得高呢?
另外,
“li.myclass”优先权比“.myclass” 还来得高又该怎么解释呢?
请各位高手解释
感激不尽