作者rrr0832 (rrr0832)
看板Web_Design
标题[问题] 为什麽这里的CSS是tag较class有优先权?
时间Fri Jul 14 08:13:18 2017
我们都知道
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」 还来得高又该怎麽解释呢？
请各位高手解释
感激不尽
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.138.128.62
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1499991201.A.DD6.html
2F：→ nottt: ity.aspx07/14 08:36
3F：推 ssccg: ul#aaa li和ul.bbb li07/14 09:17
4F：→ ssccg: ↑id ↑class07/14 09:22
6F：推 ilovekebi: .myclass 只有一个class的权重，ul#aaa li 除了原本li07/14 09:53
7F：→ ilovekebi: 的tag权重，前面还多一个id为aaa的权重，优先权会较高07/14 09:54
感谢各位
我刚才有个疑问
假设今天有三个权重一样：「.c1 span」、「.c2 span」和「span .c3」
为什麽「.c1 span」、「.c2 span」会优於「span .c3」呢？
难道判断优先权是从父元素来判断的?
还是甚至是从它们的「最原始祖先元素」来判断的?
为什麽不是从子元素判断呢？
感谢各位
※ 编辑: rrr0832 (101.138.128.62), 07/14/2017 10:14:41
各位好
1楼给的网址的文章的作者好像有点让人错乱
刚才试了一下
原来多个权重相同的选择器是看出现顺序的先後来决定
之所以「.c1 span」、「.c2 span」会优於「span .c3」原来是它把「span .c3」放在「
.c1 span」和「.c2 span」的前面
所以「span .c3」的Style才会被覆盖过去
害我想半天都想不出来…
不过还是感谢各位的解答
※ 编辑: rrr0832 (101.138.128.62), 07/14/2017 10:23:10
8F：推 enwebbs: id=100 class=10 tag=1,假如两者分数相同,就看先後顺序 07/14 16:42
9F：推 EPGo: 权重还会看阶级 id:1-0-0, class:0-1-0, tag:0-0-1 07/14 18:14
10F：→ EPGo: 1个tag = 阶级3权重1分, 1个class = 阶级2权重1分 07/14 18:15
11F：→ EPGo: 权重相同比顺序，但是阶级无法被超越 07/14 18:16
12F：→ EPGo: 可以参考ilovekebi大贴的连结 07/14 18:17
14F：推 xdraculax: 不明觉厉 07/15 18:35