定義CSS優先級

在設計網頁的過程中,我們可能想要設置某個規則比其他的規則更重要,CSS中答應這樣設置,它們被稱為重要規則(important rule)。這是根據其聲明的方式和它們的自然屬性來命名的。通過在一條規則的分號前插入!important這樣一個短語來標記一條重要規則,比如說:

p.apple { color:#red !important; background:white;}
顏色值#red被標記為!important,而背景色white未被標記,假如需要二條規則都是重要的話,那麼每條規則都需要標上!important。

正確地放置!important的位置是很重要的,否則整條規則將為無效。!important總是放在規則聲明的最後,在分號之前。

標記為!important的規則具有最高的權值,也就是說他沒有具體的特性值,但是比其他的權值都要大。需要注重的是,雖然設計者定義的樣式比用戶定義的 樣式具有更高權值時,但!important規則恰恰相反:重要的用戶定義規則要比設計者定義的樣式具有更高權值,即使是標記為!important的重 要規則也是如此。

看了這麼多文字介紹後,我們來舉個例子看一下:

樣式定義:
h1 { color:gray !important;}

應用舉例代碼:
<h1 style="color:black;">看這兒!</h1>

定義CSS優先級
定義CSS優先級

應用舉例效果:!important規則會覆蓋內聯style屬性的內容,所以結果文字是灰色的而不是黑色的。

關於作者 多力哥
定義CSS優先級
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
景文科大畢業後,我成為一名網站動畫設計師,並副修MIS電腦資訊管理。2004年,我開始接觸單眼相機,並在2008年正式成為一名接案攝影師,目前使用Canon系統進行拍攝。2016年,我愛上了美麗的水草缸,這讓我的生活多了另一層次的放鬆。每天在電腦前修圖時,能欣賞紅吱吱、綠油油的水草,彷彿多了一份平靜與愉悅。攝影與水草讓我的生活充滿了藝術與自然的交融。
連絡信箱:hello@hahasmile.com (歡迎合作提案)
DORIGO IMAGE 攝影工作室:https://dorigo-image.com
如果你喜歡我的內容,可以用行動贊助我一杯咖啡☕,支持我持續創作,也讓這個網站可以繼續營運下去喔!

若您喜歡這篇文章,歡迎按讚分享喔!
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *