作者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/m.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