css選擇器

時間 2019-11-30

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

編輯本博客css

分類：

基本選擇器

標籤選擇器：能夠選中全部同名標籤元素，無論標籤在哪兒，只要在該頁面中，均能被選擇到。因此通常用於共性設置，不是特性設置。
```
p{
    color: red;
    font-size: 20px;
}
```
View Code
網頁字體大小通常爲12px或者16pxhtml
id選擇器#對應id
```
#second_span{
     color:blue;
 }
```
View Code
標籤id在同一個頁面中惟一，任何標籤均可以設置id，命名規範：以字母開頭，能夠有數字、下劃線、中橫線，嚴格區分大小寫。css中儘可能不用id設置樣式web

類選擇器

/*類選擇器*/
.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

後期用於清除浮動

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。