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多聽誰的;一樣再比標簽選擇器,誰標簽選擇器多聽誰的;都一樣怎么辦,就近原則誰近就聽誰的

選擇中的,沒有選擇到的都對比了一下總結了一下就是以下圖

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com