首頁  >  文章  >  web前端  >  CSS樣式繼承以及層疊的具體分析

CSS樣式繼承以及層疊的具體分析

黄舟
黄舟原創
2017-04-24 09:24:051235瀏覽

這篇文章主要介紹了CSS樣式繼承和層疊的相關資料,需要的朋友可以參考下

##一:基本選擇器

標籤選擇:依照頁面當中標籤名字進行選擇,直接把樣式套用到指定的標籤上。

特點:

1.

標籤選擇器會對當年頁面當中所有的指定標籤進行選擇;

2 .標籤選擇器對程式碼的目前標籤層次結構沒有任何關聯,只要是在目前頁面上,都能被選取。

id選擇:需要先指定一個標籤設定id值(id值不能重複是整個頁面中唯一的)。

class選擇:透過給標籤取類別名,透過類別選擇器選擇指定標籤。

二:三組複雜選擇器

#1.後位選擇器

#A、可以根據目前選擇中的標籤,找到後續子標籤

B、後位選擇器可以進行多層精確選擇

2.交集選擇器

格式:第一層選擇第二層選擇{}

注意:點表示交集,一般以標籤開頭

3.並集選擇器

格式:第一個選擇器,第二個選擇器,…{}

#三:css繼承

定義:有一些樣式,在設定目前標籤的時候,同時會給它後代標籤設定

注意:繼承到樣式的標籤和定義樣式的標籤必須是從屬關係(後代標籤關係)
對文字樣式設定的基本
屬性才能被繼承(顏色color\樣式text\字體font\行屬性line) 所有關於對於盒子模型( p、span等)的屬性設定(border、定位、佈局)都無法被繼承

四:css層疊性

定義:多個選擇器同時作用在同一個標籤上的時候,會根據

優先權別來進行樣式作用

選擇器的判定方式:

-透過權值判斷法

-透過每一個選擇其中的id選擇、類別選擇、標籤選擇數量來計做權值(ICE)
-先比較id權值,再次比較類別、最後比較標籤
-全部一樣比較順序

注意:如果權值一樣,則後面覆寫前面。數權值的前提是一定要保證每一條選擇器必須要選取指定元素。

如果作用域沒有直接作用到標籤本身上,則體現的就是就近原則

important優先權最高,*優先權最低

以上是CSS樣式繼承以及層疊的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn