CSS選擇器小結

  1. HTML中引用CSS的方法總結。
  • 行內式:在HTML標籤的style屬性中編寫CSS代碼,直接做用於「當前」的HTML元素。
  1. <pstyle="color:#f0f;font-weight:bold;font-size:12px;"></p>
  • 嵌入式:在<head></head>中編寫CSS代碼,使用選擇器決定「一堆」元素的顯示效果。
  1. <head>
  2. <metacharset="utf-8">
  3. <title></title>
  4. <!--其餘head元素-->
  5. <style>
  6. p{color:red;}
  7. </style>
  8. </head>
  • 連接式:使用<link></link>連接外部CS文件,能夠在多個網頁中共享樣式規則。
  1. <linktype="text/css"rel="stylesheet"href="myCss.css">
  • 導入式:使用@import指令,能夠基於已有的樣式文件擴充新的樣式規則。
  1. <style>
  2. @import"myStyle.css"
  3. </style>
2.     CSS單位

 
3.顏色的描述
  • 顏色名,W3C定義了16個顏色關鍵字
aqua淺綠色,black黑色,blue藍色,fuchsia紫紅色,gray灰色,green綠色,lime黃綠色,maroon橘紅色,navy深藍色,olive茶青色,purpose紫色,red紅色,sliver銀色,teal青色,white白色,yellow黃色
  • 十六進制顏色(#RRGGBB或#RGB)
純紅色#ff0000,純綠色#00ff00,純藍色#0000ff。
  • 使用RGB顏色值(R,G,B)指定顏色
rgb(0,255,0)表示純綠色
  • 使用rgb百分比值(R%,G%,B%)指定顏色
100%,0%,0%,是純虹色;
0%,100%,0%,是純綠色;
0%,0%,100%,是純藍色。
3.經過給CSS規則添加前綴,能部分地解決瀏覽器兼容性問題。
前綴 「-moz」對應FireFox;
前綴「-ms-」,「-mso-」對應InternetExplorer;
前綴「-o-」對應Opera;
前綴「-webkit-」對應Chrome,Safari。
4.CSS選擇器
基本選擇器
         a.標記(或標籤)選擇器,用於設定HTML文檔中指定標籤的顯示樣式。

        b.類別選擇器,給特定的一組CSS代碼取名,而後就能夠將他們應用於多個不一樣的標籤。
         c.ID選擇器,對於頁面中獨一無二的元素,如頁腳,能夠給其id屬性賦予一個獨一無二的值。

複合選擇器:
  • 交集選擇器
直接指定特定標記中特定類別或id的元素樣式。(注意:選擇器字符間不要有空格)
  1. <pclass="p1">
  2. 這是第一段落,紅色字體
  3. </p>
  4. <pid="p2">
  5. 這是第二段落,藍色字體
  6. </p>
  7. <style>
  8. p.p1{
  9. /* 標記.類別選擇器*/
  10. /* 選擇器字符間不要有空格*/
  11. color:#FF0000;
  12. }
  13. p#p2{
  14. /* 標記#id選擇器*/
  15. color: rgb(0,0,255);
  16. }
  17. </style>
 
  • 並集選擇器
一次定義多個標籤或類別或id的樣式(注意:以逗號隔開各個選擇器)
  1. <div>
  2. 本段文本位於div元素內
  3. </div>
  4. <pclass="p1">制定了p1樣式類的段落</p>
  5. <pid="p2">制定了id的段落</p>
  6.  
  7. <style>
  8. div,p.p1,p#p2{
  9. color: cornflowerblue;
  10. text-decoration: underline;
  11. }
  12. </style>
 
  • 後代選擇器
               後代選擇器1
選擇嵌套在指定元素的內部元素的樣式(注意:以空格分開各個選擇器)
  1. <style>
  2. p em{
  3. font-size:30px;
  4. }
  5. </style>
  6. <p>
  7. 段落內:單詞的CSS以&lt;em&gt;標籤界定,在樣式表規則"p em"的做用下顯示爲:<em>CSS</em>
  8. </p>
  9. <span>
  10. 段落外:單詞的CSS以&lt;em&gt;標籤界定,不適用樣式表規則"p em"的做用下顯示爲:<em>CSS</em>
  11. </span>
               後代選擇器2
div>h2   只選擇h2元素,而且這些元素都是div的直接子元素
  1. <style>
  2. div>h2{
  3. color: crimson;
  4. }
  5. #div1>h2{
  6. text-decoration: line-through;
  7. }
  8. </style>
  9. <divid="div1">
  10. <p>content 1 of p</p>
  11. <h2>content 1 of h2</h2>
  12. <p>content 2 of p</p>
  13. <div>
  14. <h2>content 2 of h2 in the other div</h2>
  15. </div>
  16. </div>
  • 兄弟選擇器
    •    h2+p,選擇p元素             ,此元素是h2的弟弟,且是緊挨的。
    • h2~p,選出全部h2的「弟弟」,無論是否是緊挨着的
  • 通用選擇器
「*」是一個通配符,它匹配任何元素
  1. *{color:green;}    /*全部元素(的文本和邊框)都採用綠色做爲前景色 */
  2. p * {color:red} /*<P>包含的全部元素(的文本和邊框)都採用紅色做爲前景色 */
  • 屬性選擇器
a[href]測試

a[href="index.html"]測試

img[alt~="UsedforTest"]測試

img[alt^="Just"]測試

img[alt$="st"]測試
img[alt*="UsedforTest"]測試

  • 僞類選擇器
:focus實例
    僞類選擇器支持not,div:not(.myP) 選擇全部div元素,其class屬性不是.myP
實例
    還能夠連續使用多個not,div:not(.myClass1):not(.myclass2) 選擇全部div元素,其class屬性值不是.myClass1和.myClass2。
實例
還能夠使用其餘條件,div:not(id^="main") 選擇因此div元素,其id屬性值不是以main打頭的。
div:target 使用此選擇器,能夠自動依據url的目標,突出顯示特定的元素。
結構化選擇器,他與DOM密切相關
:root 選擇根元素<html>;
:empty 選擇空元素,如<p></p>;
:first-child 選擇的元素是其父元素的第一個子元素;
:last-child 選擇的元素是其父元素的最後一個子元素;
:first-of-type 選中指定元素類型的第一個兒子;
:last-of-type 選中指定元素類型的最後一個兒子;
:only-of-child 選中的元素是父元素的惟一兒子;
:only-of-type在父元素的全部兒子中,選擇那些只有一個元素的元素類型;
  • Nth類型選擇器
:nth-child(n) 選中第n個孩子;
:nth-last-child(n) 選中倒數第n個孩子;
:nth-of-type(n) 選中第n個元素類型;
:nth-last-of-type(n) 選中倒數第n個元素類型;
  •  僞元素
::first-letter和::first-line
::before和::after
CSS的繼承
  • 沒有定義CSS規則的HTML元素,從它的父級元素中繼承樣式。
  • 樣式規則屬性值的百分比應用了繼承原則。
  • CSS層疊原則
行內樣式 > id樣式 > 類別樣式 > 標籤樣式    →結論:特殊者勝出!
 



相關文章
相關標籤/搜索