首頁 > web前端 > css教學 > 使用內聯樣式時,如何從外部樣式表覆蓋衝突的 CSS 規則?

使用內聯樣式時,如何從外部樣式表覆蓋衝突的 CSS 規則?

Barbara Streisand
發布: 2024-10-30 03:39:28
原創
282 人瀏覽過

How can I override a conflicting CSS rule from an external stylesheet when using inline styling?

CSS 優先順序:了解特異性

在這種情況下,應用於rightColoumn ID 中的表格單元格的內聯樣式padding-left: 10px 被衝突的規則覆蓋來自外部樣式表。引用的樣式表包含一條規則,將 rightColumn 類別中的所有元素的 margin 和 padding 設為 0。

CSS 特異性的概念

要確定哪個 CSS 規則優先,一個稱為特異性的概念開始發揮作用。特異性是衡量 CSS 規則選擇器具體程度的指標。選擇器越具體,其特異性越高。

計算特異性

CSS 2.1 定義了以下計算特異性的規則:

  • 如果聲明為,則計數1來自樣式屬性(內聯樣式) ,如果不是來自樣式屬性,則為0。
  • 計算選擇器中 ID 屬性的數量。
  • 計算其他屬性和偽類的數量
  • 計算選擇器中元素名稱和偽元素的數量。

這四個值以 a-b-c-d 的形式連接起來,其中 a 是來自第一條規則,第二條規則中的 b,依此類推。數值越高,特異性越高。

將特異性應用於給定案例

在這種情況下,內聯樣式的特異性為0001(沒有ID 屬性,沒有其他屬性或偽類,一個元素名稱) 。外部樣式表中的衝突規則的特異性為 0010(無 ID 屬性、其他屬性或偽類、無元素名稱)。

由於 0010 高於 0001,因此外部樣式表中的規則採用優先權並覆蓋內聯樣式。

克服特異性問題的兩種解決方案

要覆蓋衝突規則,有兩個主要選項:

  1. 使用!important: 新增!important 到內聯樣式會使其更加重要並覆蓋衝突的規則。但是,應謹慎使用,因為它可能會引起混亂。
  2. 使用更高特異性的選擇器:透過向相關表格單元格添加類別或 ID 來修改內聯樣式。這將建立一個比外部樣式表中的衝突規則具有更高特異性的新規則。

以上是使用內聯樣式時,如何從外部樣式表覆蓋衝突的 CSS 規則?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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