首頁 > web前端 > css教學 > 主體

CSS優先順序的介紹

不言
發布: 2018-11-02 08:59:07
原創
3527 人瀏覽過

CSS順序和優先順序是樣式化網頁的一個具有挑戰性的部分。您可能有一天會發現您嘗試套用的CSS樣式無效。看起來好像網頁沒有執行你的程式碼。這就可能是由CSS的順序或優先衝突引起的。本文將探討什麼是css順序和優先順序以及它們如何影響樣式化網頁。

優先權

瀏覽器決定哪些CSS屬性值與元素相關。此規則是基於CSS選擇器如何組成不同類型的規則。優先順序是確切的名稱,它賦予特定CSS聲明權重。每個聲明的權重或「重要性」由等於匹配選擇器的多個選擇器類型決定。 (推薦閱讀:css優先權怎麼計算css樣式優先權順序

#優先權僅在一個元素具有多個聲明時才適用,目標元素將根據選擇器的固有值優先。這是一個用於衡量選擇器值差異的清單:

類型選擇器:這將是偽元素或類似h1,h1等的
類別。類別選擇器:這些包括屬性選擇器和偽類,如:懸停等
.ID選擇器:任何類型的ID選擇器。

通用選擇器對優先順序沒有任何影響,其中一些包括像( , - ,>,〜)這樣的組合選擇器。我們之前提到過,內聯樣式(如粗體)將始終覆蓋外部樣式表中的樣式,並且位於具有最高優先順序的鏈的頂部。

在繼續之前應該要注意一些規則。在內聯css中,html的樣式屬性首先是樣式和css檔案中的首要規則。特定選擇器也將優先於較少指定的選擇器。稍後在文件中的程式碼將覆蓋先前設定的任何先前角色。

注意:! important例外

所有這些特殊性規則的例外是當您呼叫! important方法時。當調用它時,它將覆蓋所有其他聲明。雖然這有效,但這通常是不好的做法。它打破了工作表中的自然級聯,並使調試變得困難。避免使用它的最佳做法很簡單。首先,您需要查看特異性規則,以便在另一個樣式元素之前查看優先順序。如果您必須使用! important,請將其僅應用於單一頁面,從而明智地使用它。

層疊性

您可以更好地使用Cascade,而不是使用! important方法。對於不熟悉CSS或層疊樣式表的基本方面的任何人來說,層疊是如何將不同屬性的值組合在一起的演算法。

級聯透過首先尋找正在應用於元素或屬性的所有CSS聲明來運作。它從它的起源(聲明它的地方)開始,然後是聲明的重要性。之後它將計算特異性。嵌入在HTML檔案中的任何CSS都將遵循外部樣式表,無論順序為何。重要的是要實現級聯將採取的步驟。

總的來說,如果競爭風格元素之間存在衝突,則需要考慮特殊性問題。如果一個元素的行為方式與你沒有編碼的方式相同,那麼它就是從優先權更高的東西繼承樣式。以最小的特異性開始您的樣式設計,以確保不會發生此問題。

以上是CSS優先順序的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板