Html5與Css3顏色和選擇器（五）

css3更新的顏色

RGBA:紅、綠、藍、不透明度

rgba（89，0，127，0.4）;

HSL和HSLA：色相、飽和度、亮度、不透明度

hsl(282,100%,25%);
hsl(282,100%,25%,.75);

使用與媒體相關的樣式表

link或style：添加屬性media屬性
有all、aural、braille、handheld、print、projection（投影設備）、screen、tty、tv

@media print{
    body{
        font-size:25pt;
    }
    p{
        color:#000;
    }
}

定義選擇器

//元素的名稱
h1{
    color:red;
}
//元素所在上下文
h1 em{
    color:red;
}
//類
.error{
    color:red;
}
//ID
#gaudi{
    color:red;
}
//名稱和類
strong.error{
    color:red;
}
//僞類
a:link{
    color:red;
}
//屬性
a[title]{
    color:red;
}
//屬性和屬性值
a[href="http://xxx.com"]{
    color:red;
}

只選擇一代子元素:子子元素、非子子元素等不會選中

.architect > p {
    color:red;
}

相鄰同胞結合符:不必是同一種元素類型，只要彼此相鄰就可以

//只有直接跟在同胞p元素後面的p元素顯示爲紅色
.architect p+p{
    color:red;
}

普通同胞結合符：選擇並非直接出現在另一同胞元素，可以直接相鄰，也可以不直接相鄰

//會讓任何屬於同一父元素的同胞h1後面的h2元素顯示爲紅色
h1~h2｛
    color：red；
｝

選擇某元素第一個和最後一個子元素

li：first-child{
    color:red;
}

li：last-child{
    color:red;
}

選擇某元素第一個字母或者第一行

p：first-line{
    color:red;
}

p：first-letter{
    color:red;
}

第n個子元素

/*順序*/
li:nth-child(3){
    color:red;
}
/*逆序*/
li:nth-last-child(2){
    color:blue;
}
/*分組設置簡寫*/
li:nth-child(4n+1){
    color:bule;
}

奇偶

/*奇*/
li:nth-last-child(odd){
    color:blue;
}
/*偶*/
li:nth-last-child(even）{
    color:blue;
}
/*只計算同類型的元素*/
h2:nth-of-type(odd){
    color:red;
}

只有一個子元素

li:only child{
    color:red;
}

僞元素、僞類

//是HTML並不存在的元素，並未在HTML中作相應的標記，是另一個元素的部分內容
：：first-line/*第一行*/
：：first-letter/*第一個字母*/
：：before/*在某元素之前加*/
：：after/*在某元素之後加*/
//應用於一組HTML元素，無需用類標記，不用寫出class="first-child"
：first-child
：link
：hover

按狀態選擇鏈接

//新的、未訪問的
a:link{
    color:red;
}
//訪問過
a:visited{
    color:orange;
}
//獲得焦點（通過Tab鍵）
a:focus{
    color:purple;
}
//鼠標指針停留
a:hover{
    color:green;
}
//激活時
a:active{
    color:blue;
}

按屬性選擇元素

[attribute]             //指定屬性
[attribute="value"]     //完全匹配屬性值

[attribute~="value"]   //匹配以空格分隔的多個單詞，包括完全匹配指定值
artcle[class~="barcelona"]{
    color:red;
}

[attribute|="value"]    //以value-開頭
h2[lang|="es"]{
    color:red;
}
[attribute^="value"]    //以value開頭，爲完整的單詞或單詞的一部分
a[href^="http://"]{
    color:orange;
}

[attribute$="value"]   //以value結尾，爲完整的單詞或單詞的一部分
img[src="logo.png"]{
    border:1px solid green;
}

[attribute*="value"]    //至少包含value一次的元素，不必是屬性值中的完整單詞，爲指定值的子字符串
a[href][title*="how"]{
    color:red;
}

結構性僞類選擇器

root，not，empty，target
允許根據文檔中的結構來指定元素樣式

/*根元素*/
:root{
    background:red;
}
/*排除子元素*/
div *:not(h1){
    coloe:red;
}
/*內容爲空白時*/
：empty{
    background:red;
}
/*跳轉*/
:target{
    background:red;
}

UI元素狀態僞類選擇器

css3中，有17種UI元素僞類選擇器

/*鼠標浮動*/
input[type="text"]:hover{
    color:red;
}
/*獲得焦點*/
input[type="text"]:focus{
    color:red;
}
/*鼠標按住不放*/
input[type="text"]:active{
    color:red;
}
/*選中*/
input[type="checkbox"]:checkbox{
    color:red;
}

enabled和disabled

input[type="text"]:enable{color:red;}
input[type="text"]:disabled{color:black}