首頁 > web前端 > css教學 > `html`、`body` 和通用選擇器 (*) 在 CSS 選擇器優先權上有何不同?

`html`、`body` 和通用選擇器 (*) 在 CSS 選擇器優先權上有何不同?

Barbara Streisand
發布: 2024-11-28 12:06:16
原創
342 人瀏覽過

How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?

CSS 選擇器優先權:html、body 和通用選擇器*(已更新)

問題出現:三個規則在以下情況下有何不同應用於同一個HTML 文件?讓我們探討一下這些選擇器的獨特效果:html、body 和通用選擇器*.

html 選擇器:

<p><br></p><pre class="brush:php;toolbar:false"><p></p> }<p></p>
登入後複製

此規則將顏色和背景樣式套用於元素。它的後代繼承顏色但不繼承背景,包括

和 。元素。 元素缺少預設背景,使其透明,顯示 儘管覆蓋了整個視口,但 仍然覆蓋了整個視口。元素的背景不會自動擴展其高度;它只是滲透到視口。

主體選擇器:


<p></p>}<p></p>
登入後複製

此規則將顏色和背景樣式應用於

;元素。它的所有後代都會繼承它的顏色。

類似 ;背景、背景會自動傳播到 中。元素,除非明確覆蓋。因此,當使用單一背景時,請將其放置在 或 上。或 但是,組合 的背景樣式會產生顯著差異。和可以產生獨特的效果,如下圖所示。

通用選擇器(*):


<p></p>}<p> pre></p>此規則影響每個元素,使任何隱式繼承無效。但它很容易被其他規則覆蓋,包括 和規則,由於缺乏特異性。 除非絕對必要(通常​​對於特定的孤立元素),否則通常不鼓勵使用通用選擇器中斷繼承,因為它可能會破壞所有受影響屬性的繼承鏈。 
登入後複製

以上是`html`、`body` 和通用選擇器 (*) 在 CSS 選擇器優先權上有何不同?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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