css選擇器的優先級
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
Css01
一、CSS簡介
a)Cascading Style Sheets 層疊樣式表(級聯樣式表)
b)是一個文本文件，不需要編譯 由瀏覽器直接執行
c)作用是 定義網頁外觀 如 字體,背景，等。。。
d)可以配合JavaScript做出絢麗的效果
二、CSS 特點
a)精確的定位準確的控制頁面的任何元素
b)精細的控制可以做到像素級別的調整
c)樣式與內容分離便於維護，便於重用
三、使用方法
1.內聯
寫在標簽內的style屬性中的叫做內聯
例如: <p style="color:yellow">祖傳牛皮癬,專治老中醫</p>
2.內嵌
寫在head標簽的style標簽中的屬性叫做內嵌
例如:
<style>
p{color:red;}
</style>
3.外聯
通過外部引入的方式使用
例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>
四、基礎語法
1.CSS 格式選擇器負責圈定範圍，要修改的元素集合聲明由屬性名和屬性值組成，中間用冒號連接(屬性名:屬性值)，用於設定具體樣式CSS組成由選擇器和一個或多個聲明組成，多個聲明之間用分號選擇器{屬性名:屬性值;屬性名:屬性值;}
2.CSS 註釋Html 註釋 <!-- -->樣式表裏面的註釋就一種/* 這裏面是註釋內容 */註釋不能嵌套
3.單位
a)長度單位
i.em 倍數
ii.px: pixel 像素 屏幕上顯示的最小單位 用於網頁設計。
iii.PPI（DPI）每英寸的像素點 是一個率 表示了 清晰度 精度
iv.Pt 是一個標準的長度單位 1pt=1/72英寸 用於印刷行業公式: px = pt*DPI/72;v.cm/mm 厘米/毫米
b)顏色單位
i.英文名: red green blue 。。。。。
ii.十六進制rgb #000000 - #ffffff
iii.Rgb 數字 (0-255) rgb(255,0,0) 百分比(0-100%) rgb(100%,0%,0%)
c)URL地址
1.不用引號 url(test.jpg)
2.絕對路徑 url(http://www.baidu.com/test.jpg)
3.用單引號 url(‘./test.jpg’)
4.用雙引號url(“./test.jpg”)
五、選擇器
1.HTML選擇器就是使用html元素作為選擇器
例如: p{color:red}
2.ID選擇器使用id值作為選擇器
使用方式: #id值{聲明}
例如:#duang{color:red;}
3.Class選擇器
使用class值作為選擇器
使用方式:.class值{聲明}
例如:.butingke{color:red}
註意:不要輕易使用id選擇器 請多使用class選擇器進行選擇！
4.關聯選擇器
通過一級一級的向下查找得到唯一使用選擇器
每個選擇器之間使用空格隔開
例如: ul #zhangsan b{color:red}
5.組合選擇器
多個選擇器組合在一起中間使用逗號分隔
例如:p,.pangzi{color:red}
6.偽元素選擇器
a):link 未訪問鏈接
b):hover 鼠標移動到鏈接上時
c):active 鼠標選中的鏈接
d):visited 已訪問的鏈接
只有a標簽有上面四種偽元素內容
除a標簽以外的文本標簽現在只有兩種偽元素內容分別為（hover，active）
選擇器的優先級: 關聯選擇器>id選擇器>class選擇器>html選擇器
你們下午做一下測試 查看一下上面的優先級是否和你測試的優先級一樣
排除上面的內容
離得越近 優先級越高（就近原則）
總結，兩大點
一 a標簽偽類使用的時候是順序的，不然有的效果出不來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類3</title> <style> /*1 a:link{color:black;}*/ /*2 a:visited{color:gray;}*/ /*3 a:hover{color:red;}*/ /*4 a:active{color:blue;}*/ /*順序不能亂 lvha就按這個來*/ a:link{color:black;} a:visited{color:green;} a:hover{color:red;} a:active{color:blue;} /*除a標簽以外的文本現在只能有兩個偽元素選擇器*/ .p:hover{color:green;} .p:active{color:blue;} </style> </head> <body> <h1 class="p">我不是a標簽的文本標簽，看看我的顏色有哪些變化</h1> <a href="1.1.html">2_css.html</a> </body> </html>
二 選擇器的優先級
大部分都知道id大於class大於html標簽 那麽聯合選擇器和他們比那個優先級更高呢，我做了個小測試很有意思大家可以執行看看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聯合選擇器1</title> <style> li{color:red;} #a li b{color:blue;} #b{color:red;} </style> </head> <body> <ul id="a"> <li> 聯合選擇器大於id<b id="b">大於id</b> </li> <li> 英雄聯盟<b>英雄是寒冰最屌<b>！！！ </li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聯合選擇器1</title> <style> li{color:red;} ul li b{color:blue;} #b{color:green;} </style> </head> <body> <ul id="a"> <li> 聯合選擇器大於id<b id="b">大於id</b> </li> <li> 英雄聯盟<b>英雄是寒冰最屌<b>！！！ </li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聯合選擇器1</title> <style> li{color:red;} .c b{color:blue;} #b{color:green;} .c{color:#987654;} </style> </head> <body> <ul id="a"> <li class="c"> 聯合選擇器大於id<b id="b">大於id</b> </li> <li> 英雄聯盟<b>英雄是寒冰最屌<b>！！！ </li> </ul> </body> </html>
第一次：我把b標簽定義了兩次，一個是聯合選擇器（有一個id兩個標簽選擇器）個定義； 聯合選擇器大
第二次：我把b標簽定義了兩次，一個是聯合選擇器（三個標簽選擇器）定義，一個是id定義；id大
第三次：我把b標簽定義了兩次，一個是聯合選擇器（有一個class一個標簽選擇器）定義，一個是id定義；id大
那麽這其中有什麽原理呢？
我多次測試之後發現一個原理
多個聯合嵌套的，兩個相同定義的比較
先比id，誰id多聽誰的；一樣再比class誰class多聽誰的；一樣再比標簽選擇器，誰標簽選擇器多聽誰的；都一樣怎麽辦，就近原則誰近就聽誰的
選擇中的，沒有選擇到的都對比了一下總結了一下就是以下圖
css選擇器的優先級