CSS的七種基本選擇器及其權值

2021-08-09 05:40:51 字數 978 閱讀 9680

一、學習選擇器的優先順序,我們要知道的是:

寫到選擇器裡面的樣式都會生效,只有樣式出現衝突的時候才會有優先順序的概念; 二、

七種常用的基本選擇器型別:

1.通配選擇器

*代表文件裡所有標籤,一般用於初始化操作

優先順序最低,權值0

2.標籤選擇器

div代表文件裡所有相同的標籤

權值13.類選擇器

.div1

標籤的類名可以重名

權值10

4.id選擇器

#div1

id具有唯一性,文件裡面只能有乙個id名,不能有相同的id名,這樣就決定了id選擇器少用於樣式布局,一般用類選擇器

權值100

5.行間樣式優先順序高於id選擇器

權值1000

6.important

列如:background-color: blue!important;

這個時候背景顏色藍色優先

權值10000

7.群組選擇器

列如:.f1,.f2

通過它可以設定多個選擇器的樣式,優點是可以節省**量

8.子代選擇器

列如:.f1>.com{}

.f2>.com{}

#com2{}

優點在於可以更準確的找到需要設定樣式的一組或者單個標籤,優先順序高於同級別的基本選擇器

優先順序相同的選擇器,樣式選擇後定義的樣式,相當於後寫的樣式覆蓋掉先寫的樣式。

三、權值比較

後代選擇器比較優先順序的時候,

取權值最高的比較,數量多的優先順序就高

,如果數量一樣則繼續比較次高權值的數量

通配選擇器 0

標籤選擇器 1

類選擇器 10

id選擇器 100

style行間 1000

!important 10000

後代選擇器

權值相加,誰大誰優先

CSS的簡介及其選擇器

基本語法檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視css的效果 檢視css的效果 檢視css的效果 zhangsan 23 選擇所有標籤1.未連線 a link 2.已經訪問鏈結 a visited...

CSS選擇器的基本樣式

作用是什麼 設定如何顯示 html 標籤。語法結構是什麼 第一種 選擇器 說明 這種方式的css樣式表由選擇器以及一條或多條宣告兩個部分組成 該種樣式表只能定義在style 標籤或css 檔案中,每個style標籤或css檔案可定義多個css樣式表 第二種 style declaration1 de...

CSS中選擇器的權重值

css 具有自己的優先順序計算方法,而不僅僅是行間 內部 外部 id class 元素 選擇器 栗子id id class.class 標籤p 屬性 type text 偽類 hover 偽元素 first line 相鄰選擇器 子代選擇器 內聯樣式,如 style 權值為1000。id選擇器,如 ...