css選擇器

編輯本博客css

 分類:

基本選擇器

  1. 標籤選擇器:能夠選中全部同名標籤元素,無論標籤在哪兒,只要在該頁面中,均能被選擇到。因此通常用於共性設置,不是特性設置。
    p{
        color: red;
        font-size: 20px;
    }
    View Code

    網頁字體大小通常爲12px或者16pxhtml

  2. id選擇器#對應id
    #second_span{
         color:blue;
     }
    View Code

    標籤id在同一個頁面中惟一,任何標籤均可以設置id,命名規範:以字母開頭,能夠有數字、下劃線、中橫線,嚴格區分大小寫。css中儘可能不用id設置樣式web

  3. 類選擇器
    /*類選擇器*/
    .title{
        color:yellowgreen;
        font-size: 16px;
    }
    View Code

    任何標籤均可以加類屬性,類能夠重複。同一個標籤能夠同時屬於多個類,不通類名中間用空格隔開。屬性衝突最後一個生效。必定要有公共類的概念,每一個類要儘可能的小,供多個標籤使用。ide

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>練習</title>
        <style type="text/css">
            .color{
                color:green;
    
            }
            .underline{
                text-decoration: underline;
            }
            .size{
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="size color">段落1</p>
            <p class="lv2 color underline">段落2</p>
            <p  class="size underline">段落2</p>
        </div>
    </body>
    </html>
    View Code

高級選擇器

後代選擇器

 根據標籤嵌套關係進行選擇post

<style type="text/css">
        <!--後代標籤-->
        div p{
            color:yellow;
        }
        div div p{
            color:gray;
        }
        .container div{
            color:red;
        }
</style>
View Code

子代選擇器

 用大於符號選擇,僅選擇下一代標籤,不會選擇後代全部標籤字體

/*--子代標籤--*/
.container >p{
color:yellowgreen;
}
View Code

 交集選擇器

 做用於兩個樣式交集的對象上spa

h3{
    width:200px;
    color:red;
}
.active{
    font-size:30px;
}
/*交集選擇器*/
h3.active{
    background-color:yellow;
}
View Code
 並集選擇器

同一個樣式做用於多個標籤上,用逗號分隔。3d

/*經過並集選擇器同時設置多個標籤樣式*/
a,h6{
    font-size: 20px;
    color:#666;
    text-decoration:none;
}
View Code

 resert csscode

 屬性選擇器

屬性選擇器一般使用在表單控件中,使用比較頻繁htm

/*查找具備for屬性的label標籤*/
label[for]{
    color:red;
    font-size:30px;
}
label[for="pwd"]{
    color:green;
}
/*查找全部tetle屬性等於hello的標籤*/
[title="hello"]{
    color:green;
}
/*全部title屬性以hello開頭的元素*/
[title^="hello"]
{
    color:green;
}
/*全部title屬性以hello結尾的元素*/
[title$="hello"]{
    color:green;
}
/*全部title屬性包含(字符串)title的元素*/
[title*="title"]{
    color:green;
}
/*全部title屬性中(多個值或以空格分開)包含title的元素*/
[title~="title"]{
    color:green;
}
View Code

~開頭$結尾,*字符串包含~多值包含

僞類選擇器之a標籤
<style type="text/css">
    /*後代選擇器:.box ul*/
    /*交際選擇器:li.item1*/
    /*沒有被訪問的標籤樣式*/
    .box ul li.item1 a:link{
        color:green;
    }
    /*被訪問後的a標籤的樣式*/
    .box ul li.item2 a:visited{
        color:yellow;
    }
    /*鼠標懸浮於a連接上的樣式*/
    .box ul li.item3 a:hover{
        color:red;
    }
    /*點擊時a標籤的樣式*/
    .box ul li.item4 a:active{
        color:red;
    }
</style>
View Code
<body>
    <div class="box">
        <ul>
            <li class="item1"><a href="#">沒有被訪問的標籤樣式</a></li>
            <li class="item2"><a href="#">被訪問後的a標籤的樣式</a></li>
            <li class="item3"><a href="#">鼠標懸浮於a連接上的樣式</a></li>
            <li class="item4"><a href="#">點擊時a標籤的樣式</a></li>
        </ul>
    </div>
</body>
View Code
僞類選擇器二
<style type="text/css">
    /*選中第一個元素*/
    div ul li:first-child{
        font-size:25px;
        color:red;
    }
    /*選中第3個元素,從1開始*/
    div ul li:nth-child(3){
        font-size:25px;
        color:green;
    }
    /*選中最後一個元素*/
    div ul li:last-child{
        font-size:25px;
        color:red;
    }
    /*n表示選中全部的,從0開始,0表示沒有被選中*/
    div ul li:nth-child(n){
        font-size:25px;
        color:red;
    }
    /*選中全部偶數標籤*/
    div ul li:nth-child(2n){
        font-size:25px;
        color:red;
    }
    /*選中全部基數標籤*/
    div ul li:nth-child(2n-1){
        font-size:25px;
        color:red;
    }
    /*相隔多個後選中,如相隔3個選中*/
    /*隔m換一,則(m+1)n+1*/
    div ul li:nth-child(4n+1){
        font-size:25px;
        color:red;
    }
</style>
View Code
僞元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僞元素選擇器</title>
    <style type="text/css">
        p.p1:first-letter{
            font-size:48px;
        }
        p.p2:before{
            content:"----";
            color:red;
        }
        p.p3:after{
            content:"#####";
            color:green;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">文本首字母設置特殊樣式</p>
        <p class="p2">用於在元素的前面插入新內容</p>
        <p class="p3">在元素內容後面插入新的內容</p>
    </div>
</body>
</html>
View Code

 

後期用於清除浮動

相關文章
相關標籤/搜索