1. 程式人生 > >html/css-css選擇器-2~5

html/css-css選擇器-2~5

 優先級別

和先後沒關係

!important在color和;之間,不建議用,會打亂 >內聯樣式(括號裡style=“”)>外聯:ID(#ID)> 類(.cls)>元素(h1) >萬用字元(*)

 

層級選擇器:後代 子 相鄰兄弟 

<html lang="en">    
    <head>
        <meta charset="UTF-8">
        <title> 層級選擇器 </title>   
        <style> 
            #p1 h1{color: red}  *後代選擇器
            #p1 > h1{color: red}  *子選擇器
            #p1 + h1 {color:purple}*相鄰兄弟選擇器,下一個兄弟選擇器
            #p1 ~ h1 {color:purple}*普通兄弟選擇器:後面的兄弟都變了
        </style>       
    </head>
    <body>
        <p id="p1">   *換成div才行 p寫起來有問題後面說!!
            <h1>jdsjf </h1>    
            sdjfj
        </p>
        <h1>jkdf<h1>  *不顯示,因為不是p後代
    </body>

<html>

html   body   p   h1

          head   meta+title

元素之間的3種關係:

1 父級和子級的關係

2 兄弟之間的關係  title和p不算,得有相同父級

3 祖先和後代的關係

用法根據HTML元素之間的層級關係來使用,語法: 祖先元素 後代元素 {屬性名 屬性值}   div em{color: red;}  {}為宣告塊

分為子選擇器和後代選擇器,還有相鄰兄弟選擇器和普通兄弟選擇器

難點:關係

疑問:為什麼div h1比#p1大

注意:大小寫不要錯 ,;不要忘了

 

屬性選擇器  {屬性名稱}

用法多而近,作用:在指定範圍通過是否具有指定屬性篩選實際開發中,屬性選擇器配合基本選擇器使用   

注意:p和[name]不能有空格      

示例:

p[name] {color:indigo;}

[name] {color:indigo;}   速度會比較慢

常見擴充套件用法(1-4):

1.[屬性名稱=屬性值]   完全一致

2.[屬性名稱^=屬性值]  屬性值以什麼開始的

3.[屬性名稱$=屬性值]  屬性值以什麼結束的

4.[屬性名稱*=屬性值]  屬性值包含什麼

5.[屬性名稱~=屬性值]  屬性值以空格為分隔符,分割後的值至少有一個和限定匹配

6.[屬性名稱|=屬性值] 屬性為value或以value-開頭   |  shift+enter上面那個

 

組合選擇器:包括層級選擇器

1.多個並列使用,中間用,分隔  #p,.cls

2.多個並列使用,無分隔符   p[name]