什麼!重要的意思是CSS?

!重要的力量在級聯的變化

學習如何編碼網站的最佳方法之一是查看其他網站的源代碼。 這種做法是有多少網絡專業人員學習他們的技巧,尤其是在網頁設計課程書籍和在線培訓網站有這麼多選項的日子裡。

如果您嘗試這種做法並查看網站的級聯樣式表(CSS),那麼您可能在該代碼中看到的一行是:重要的一行。

這意味著什麼,同樣重要的是,如何在樣式表中正確使用該聲明?

CSS的級聯

首先,了解級聯樣式表實際上是級聯的 ,這意味著它們按照特定順序放置是很重要的。 一般來說,這意味著樣式按瀏覽器讀取的順序進行應用。 第一種風格是應用的,然後是第二種等等。

因此,如果某個樣式出現在樣式表的頂部,然後在文檔中向下更改,則該樣式的第二個實例是在後續實例中應用的樣式,而不是第一個樣式。 基本上,如果兩種風格說相同的東西(這意味著他們具有相同的特異性水平),則將使用列出的最後一個。

例如,讓我們想像一下樣式表中包含以下樣式。 即使應用的第一個樣式屬性為紅色,段落文本也會呈現為黑色。

這是因為“黑色”值列在第二位。 由於CSS是從頂部到底部讀取的,因此最終樣式為“黑色”,因此該樣式獲勝。

p {color:red; }
p {color:black; }

如何!重要改變優先順序

現在您已經理解了CSS如何處理這些幾乎相同的規則,我們可以看看!important指令如何改變一些東西。

!重要的指令影響你的CSS級聯的方式,同時遵循你認為最重要的規則並應該被應用。 無論規則出現在CSS文檔中的哪個位置,始終應用具有!important指令的規則。

為了使段落文本始終為紅色,從以上示例中,您將使用:

p {color:red!important; }
p {color:black; }

現在,即使“黑色”值列在第二位,所有文字也會顯示為紅色。 !重要的指令覆蓋了級聯的正常規則,並且它給出了非常高的特性。

如果你絕對需要這些段落顯示為紅色,這種風格會做到這一點,但這並不意味著這是一個好的做法。 接下來我們來看看什麼時候你可能想要使用!重要的,什麼時候不適合。

何時使用!重要

!重要指令在測試和調試網站時非常有用。 如果您不確定風格為什麼沒有被應用,並認為它可能是一個特殊問題,那麼您可以將!important聲明添加到您的樣式中,以查看是否修復了它。

如果添加!重要確實可以解決樣式問題,那麼您已經確定它是一個特定問題。 然而,你不想離開這個重要的代碼,它只是為了測試的目的而放在那裡。

由於測試已完成,您現在應該刪除該指令並調整選擇器以實現您的樣式工作所需的特異性。 !重要的不應該進入您的生產現場,部分原因是它如何改變正常的級聯。

如果你嚴重依賴!重要聲明來實現你想要的樣式,你最終將會擁有一個散佈著!重要樣式的樣式表。 你將從根本上改變頁面的CSS處理方式。 從長遠的管理角度來看,這是一種懶惰的做法。

使用!重要的是用於測試,或者在某些情況下,當您絕對必須重寫作為主題或模板框架一部分的內聯樣式時。

即使在這些情況下,盡可能謹慎地使用這種方法,而是努力編寫可以理解級聯的干淨樣式表。

用戶樣式表

關於!重要指令的最後一個註釋是必須理解的。 該指令也適用於幫助網頁用戶處理使頁面難以使用或閱讀的樣式表。

通常,如果用戶定義樣式表以查看網頁,則該樣式表被網頁作者的樣式表取代 。 如果用戶將樣式標記為!important,那麼即使作者將規則標記為!important,該樣式也會覆蓋網頁作者的樣式表。

這對需要以某種方式設置樣式的用戶很有幫助。 例如,某人可能需要增加他們使用的所有網頁上的默認字體大小。 通過在您構建的頁面中謹慎使用!important指令,您可以滿足用戶可能具有的任何特殊需求。

由Jeremy Girard編輯