如何克服內聯樣式中 CSS 特異性的問題？

CSS 優先級：克服特異性

在給定的網頁中，左側填充的內聯樣式被引用的樣式表覆蓋。出現此問題的原因是兩種樣式的特殊性不同。

CSS 中的指定規則是由選擇器完成的，選擇器規定規則適用的元素。選擇器的特異性決定了其優先級，而特異性較高的規則優先於較低的規則。

在此範例中，引用的樣式表包含規則「.rightColumn {margin: 0; padding: 0; }」和選擇器「.rightColumn 」。此選擇器與 ID 為“rightColumn”的元素內的任何元素相符。出現問題的原因是內聯樣式中「td」的樣式適用於任何表格單元格元素，無論其父元素為何。

要解決此問題，有兩個選項：

使用特異性：

透過添加更高特異性的選擇器（例如類或ID）來提高“td”內聯樣式的特異性。例如：

<pre class="brush:php;toolbar:false"><style type="text/css">
td#myUnpaddedTable {
    padding-left:10px;
} 
</style>

在這個例子中，選擇器「#myUnpaddedTable」（0101）的特異性高於「.rightColumn *」（0010），使得內聯樣式更具體。

使用 !important:

將「!important」新增至內嵌樣式會強制瀏覽器將其優先於任何其他樣式。應避免這種方法，因為它可能會導致複雜樣式表的混亂。

以上是如何克服內聯樣式中 CSS 特異性的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！