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

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中文網其他相關文章！