CSS層疊樣式的主次順序

2021-04-17 06:55:07 字數 972 閱讀 3196

當使用了多個樣式表,樣式表需要爭奪特定選擇符的控制權。在這些情況下,總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。

正如以前所提及的,網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突,網頁製作者的規則會凌駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內建樣式表。

網頁製作者應該小心地使用! important 規則,因為它們會超越使用者任何的! important 規則。例如,乙個使用者由於視覺關係,會要求大字型或指定的顏色,而且這樣的使用者會有可能宣告確定的樣式規則為! important,因為這些樣式對於使用者閱讀網頁是極為重要的。任何的! important 規則會超越一般的規則,所以建議網頁製作者使用一般的規則以確保有特殊樣式需要的使用者能閱讀網頁。

選擇符規則: 計算特性

基於它們的特性級別,樣式表也可以超越與之衝突的樣式表,乙個較高特性的樣式永遠都凌駕於乙個較低特性的樣式。這只不過是計算選擇符的指定個數的乙個統計遊戲。

統計選擇符中的id屬性個數。

統計選擇符中的class屬性個數。

統計選擇符中的html標記名格式。

最後,按正確的順序寫出三個數字,不要加空格或逗號,得到乙個三位數。( 注意,你需要將數字轉換成乙個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。以下是乙個按特性分類的選擇符的列表:

#id1          /* a=1 b=0 c=0 --> 特性 = 100 */

ul ul li.red /* a=0 b=1 c=3 --> 特性 = 013 */

li.red /* a=0 b=1 c=1 --> 特性 = 011 */

li /* a=0 b=0 c=1 --> 特性 = 001 */

特性的順序

為了方便使用,當兩個規則具同樣權重時,取後面的那個。

css樣式,層疊順序屬性z index

在做專案的時候,居然單擊後顯示的順序一直被別的li標籤壓著,最後終於找到了,是css的z index屬性賦值了,值越大,顯示的層就越高 z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序...

css層疊樣式

css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...

css層疊樣式

層疊樣式表 層疊 相同的樣式的不同值作用到同一元素的時候,會有樣式被覆蓋.樣式生效會有先後重要的順序.根據樣式優先順序,如果優先順序一樣,後寫會覆蓋先寫的.樣式表 元素視覺表現的集合.例如我們看到的寬高背景顏色等等 樣式是依附html而存在的,如果沒有標籤,樣式將毫無意義.最小影響法則 當我們建立乙...