CSS规则的优先级匹配_html/css_WEB-ITnose
CSS规则之间可以互相覆盖,这一点我们应该已经习以为常了。然而正是由于规则之间可以互相覆盖、子元素继承父元素的默认行为,导致了CSS冲突的问题。 碰到CSS冲突时,通常我们会加入一些更加详细的规则来明确如何显示,以此解决冲突。通常越详细的规则优先级会越高,但优先级究竟是如何定义的呢?
首先根据CSS定义位置来区别,优先级从低到高如下:
同样定义位置的规则,根据不同类型选择器的个数来确定。选择器的优先级从低到高如下规则:
即 ID > 伪类 > 属性 > 类 > 元素 > 通配符,首先我们数规则中ID的个数,ID个数越多的规则优先级越高。如果相同,再数伪类,以此类推。
来个例子:
article p span{ color: blue;}#red{ color: red;}
登入後複製
再比如:
#wrapper header div nav #gnavi{ list-style-type: none;}#top #hright #gnavi{ list-style-type: square;}
登入後複製
此外,最高优先级的是!import的属性,如果都加了!important那就继续数规则中属性和元素的个数。
能避免!important的话就不要这样写了,这样的样式太难扩展了。
参考链接:
除非注明,本博客文章均为原创,转载请以链接形式标明本文地址: http://harttle.com/2015/07/16/css-priority.html
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

我如何使用html5< time> 元素以語義表示日期和時間?
