當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS样式优先级与权重计算方式

發布時間：2025/3/21 CSS 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS样式优先级与权重计算方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS一共有四種樣式控制方式:行內樣式、內嵌樣式、鏈接樣式、導入樣式(@import).選擇器則有標簽選擇器,類名選擇器,ID選擇器,和偽標簽選擇器四種.那么它們的優先級與權重又是計算的呢?

首先上權重計算方法:

一.內聯 > id > class >標簽

權重計算數值1.內聯樣式 1000 2.id樣式 0100 3.class樣式 0010 hover,nth-child()等CSS3"偽標簽"權重與"真-class"相同; 4.標簽樣式 0001

以后是權重計算數值,也就是說,ul li a{}中的樣式,將會比li a{}級別更高,因而

<ul><li><a>test</a></li> </ul><style>ul li a{ //權重等于0003color:red}li a{ //權重等于0002color:blue } </style>

中的test字體顏色將會是紅色而非藍色.而當樣式設置位于同一種樣式控制方式,比如全為鏈接時候,將會后者覆蓋前者(CSS疊加樣式表是進行樣式的不斷疊加,因而同一權重,后者會覆蓋前者).

二,同權重,樣式設置方式不同

而當樣式設置權重相同但位于不同樣式設置方式時,將會按照
行內樣式>內嵌樣式>鏈接樣式.進行樣式疊加.也就是說

假如

<ul><li><a>test</a></li> </ul><style>ul li a{ //權重等于0003,但是位于鏈接樣式中color:red}ul li a{ //權重等于0003,但是位于內嵌樣式中color:blue } </style>

而這一次,test文字的字體顏色將為藍色.

三.導入樣式(@import)與內嵌樣式

至于導入樣式(@import)則是將其導入到內嵌樣式中,故而其優先級與內嵌樣式相同,同樣符合疊加原理,或者說就近原則.

四,測試聲明

本文所言均已經經過本人測試,而本文則是為了整理以往的網絡材料,并修正其他前輩們的一些錯誤,如果你發現了本文中的一些錯誤,遺漏或者對此有什么疑問,請在博文下方留言,本人會及時回復.以下是本人的測試環境.

本文章中測試環境,如下:

谷歌版本: 50.0.2652.2 (64-bit);Opera:36.0.2130.32 ,Windows 10 64-bit (WoW64);火狐:44.0.2;IE:11.162.10586.0;

以上是生活随笔為你收集整理的CSS样式优先级与权重计算方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。