PTT
Submit
Submit
选择语言
正體中文
简体中文
PTT
Web_Design
[问题] 为什么这里的CSS是tag较class有优先权?
楼主:
rrr0832
(rrr0832)
2017-07-14 08:13:18
我们都知道
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” 还来得高又该怎么解释呢?
请各位高手解释
感激不尽
作者:
nottt
(无)
2017-07-14 08:36:00
http://blog.darkthread.net/post-2011-06-08-css-specific
ity.aspx
作者:
ssccg
(23)
2017-07-14 09:17:00
ul#aaa li和ul.bbb li↑id ↑class
作者:
ilovekebi
2017-07-14 09:48:00
http://muki.tw/tech/css-specificity-document/
.myclass 只有一个class的权重,ul#aaa li 除了原本li的tag权重,前面还多一个id为aaa的权重,优先权会较高
作者: enwebbs
2017-07-14 16:42:00
id=100 class=10 tag=1,假如两者分数相同,就看先后顺序
作者: EPGo
2017-07-14 18:14:00
权重还会看阶级 id:1-0-0, class:0-1-0, tag:0-0-11个tag = 阶级3权重1分, 1个class = 阶级2权重1分权重相同比顺序,但是阶级无法被超越可以参考ilovekebi大贴的连结最初的例子加上权重
https://jsfiddle.net/gpofsko0/
作者:
xdraculax
(首席怪叔叔)
2017-07-15 18:35:00
不明觉厉
继续阅读
[问题] Google Custom Search结果
myhome6206
[讨论] 前后端分离的专案
Neisseria
[问题] 挑选凭证
QQaRed
[问题] Sublime Text的专案区图示
qazsd
[问题] 请问巴哈创作大厅里的blog的rss订阅?
balbigloon
[讨论] UI/UX设计师要会网页程式到怎样的程度呢?
G4321
[问题] wix无法删除My uploads的部分文件资料
quirrky
[请益] 在作品集网站中崁入新闻报导
musicalover
[问题] 请推荐范例网站可以临摹
ec2242
[问题] 虚拟主机 v.s wordpress专用主机
patterson01
Links
booklink
Contact Us: admin [ a t ] ucptt.com