css3選取器，css選取器

css3選取器，css選取器

萬用字元選取器
    通配選取器的作用就是對頁面上所有的元素都生效，
    頁面上的所有標籤都會展示出萬用字元選取器設定的樣式。
    這樣的弊端就是影響網頁渲染的時間。所以不推薦直接使用萬用字元選取器
    取代寫法就是  把需要統一設定的元素放在一起，通過 [分組選取器]
    一次性設定。


    對於初學者，不用過於在於網頁開啟速度以及效能問題，對於什麼時候使用
    萬用字元選取器呢？在你需要的時候直接用就可以。其實也就下面這段代碼。
    如：code1

    萬用字元的另一個用法就是給某個元素的後代設定相同的樣式。如：code3
    結合類別選取器使用。
   code1
{
    margin: 0;
    padding: 0;
}

-------------------

分組選取器(並集選取器)
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    /*code2*/
    margin:0;
    padding:0;
}

--------------------

標籤選取器
h1{
    color: blue;

}
p{
    font-family: 微軟雅黑;
    color: cadetblue;
}

--------------------

類別選取器: 最常用的選取器
類別選取器的單獨使用
.desc{
    border: dashed;
}
類別選取器和其他形式組合使用
.desc p{
    color: deeppink;
    font-size: 20px;
}

.desc *{
    /*code3*/
    color: deeppink;
}

--------------------

ID選取器

    需要注意的是，注意大小寫.

    不能使用詞列表，參考區別2，錯誤碼如下：
    #title name{
        font-size: 30px;
    }
    可以和其他選取器結合使用

#title{
    font-size: 30px;
}
#title .name{
    color: #000;
}

--------------------

後代選取器（包含選取器）
.desc p{
    color: deeppink;
    font-size: 20px;
}

.descendant em{
    font-weight: bold;
}

--------------------

子項目選取器
.child > p > em{
    font-size: 30px;
}

--------------------

相鄰選取器
可以結合其他選取器使用

    需要注意的是：使用相鄰選取器，必須是有共同的父元素

.Adjacent h5 + p {
    margin-top:50px;
}
兄弟選取器
.Adjacent h5 ~ p{
    font-size: 30px;
}

--------------------

屬性選取器
頁面上所有的超連結標籤顏色都會變成紅，也可以和其他選取器組合使用

根據一個屬性去選擇
.testA a[href] {
    color:red;
}

   a[href] {
        color:red;
    }

根據多個屬性去選擇
同樣也可以和其他選取器組合使用
a[href][title] {
    font-size: 25px;
}

根據具體的屬性值去選擇，案例如上
a[href='#'][title='test'] {color: deeppink;}

屬性與屬性值必須匹配
a[class='aaa bbb']{
    color: chartreuse;
}

根據部分屬性值選擇,即只要該屬性中存在指定值得元素都會被選擇到

    如果忽略了波浪號，則說明需要完成完全值匹配

p[class~='important']{
    color: red;
}

子串匹配屬性選取器 : 分三種
選擇的屬性中，屬性值以指定的屬性值開頭
a[href ^= 'http://www.apple']{
    color: deeppink;
}
選擇的屬性中，屬性值以指定的屬性值結尾
a[href $= 'microsoft.com']{
    color: cadetblue;
}
選擇的屬性中，屬性值存在指定的屬性值
a[href*='www.w3school.com']{
    color: red;
}

特定屬性選擇類型

    屬性選取器最常見的用途還是匹配語言值

p[lang|='en']{
    color: red;
}

--------------------

偽類
    偽類名對大小寫不敏感;
    :active 需要放在 :hover 後邊才會生效;
    :hover 需要放在 :link :visited 後邊才會生效;

    另外偽類也可以和其他選取器結合使用

a:link {color: #FF0000} 未訪問的連結 
a:visited {color: #00FF00} 已訪問的連結 
a:hover {color: #FF00FF} 滑鼠移動到連結上 
a:active {color: #0000FF} 選定的連結 

:first-child 偽類來選擇元素的第一個子項目
.wl p:first-child{
    color: red;
}  容易被誤解！讀法：選用.wl這個類的元素下邊第一個p標籤，並不是p標籤內的第一個元素，與下邊樣式對比

.wl p i:first-child{
    font-size: 30px;
}  讀法：.wl 類下所有p標籤中的第一個 i 標籤

.wl p:first-child i{
    color: #FF00FF;
}  讀法：.wl 下邊的第一個 p 標籤中所有 i 標籤

.wl li:first-child{
    font-family: monospace;
}

--------------------

虛擬元素   註：也可以和其他選取器結合使用
:first-line 虛擬元素:用於向文本的首行設定特殊樣式
:first-line 只能用於區塊層級元素,看頁面樣式

    註：以下屬性可以用於虛擬元素:first-line中
    font
    color
    background
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

.wl p:first-line {
    color:#ff0000;
    font-variant:small-caps;
}

:first-letter: 處理首字母
:first-letter 只能用於區塊層級元素,看頁面樣式

    註：以下屬性可以用於虛擬元素:first-letter中
    font
    color
    background
    margin
    padding
    border
    text-decoration
    vertical-align (僅當 float 為 none 時)
    text-transform
    line-height
    float
    clear

.wl p:first-letter{
    color: chocolate;
}
以上兩個就構成了多重虛擬元素

:before 虛擬元素 :可以在元素的內容前面插入新內容
.wl p:before{
    content: url("");
}
.wl p:after{
    content: url("");
}

********
關於選擇的優先順序的問題

    id選取器優先順序 > 類別選取器優先順序 > 標籤選取器優先順序