web前端——CSS 03 高級選擇器(表單控件簡單案例）

時間 2019-11-08

標籤 web 前端 css 高級選擇器表單控件簡單案例欄目 HTML 简体版

原文原文鏈接

高級選擇器分爲：

後代選擇器
子代選擇器
並集選擇器
交集選擇器
屬性選擇器
僞類選擇器
僞元素選擇器

後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）css

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

子代選擇器

使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。html

1 .container>p{
2     color: yellowgreen;
3 }

並集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器css3

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

好比像百度首頁使用並集選擇器。web

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/

交集選擇器

使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器語法：div.active服務器

好比有一個<h4 class='active'></h4>這樣的標籤。佈局

那麼post

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
    background: #00BFFF;
}

它表示二者選中以後元素共有的特性。字體

屬性選擇器

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。spa

/*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

僞類選擇器

僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則" LoVe HAtecode

/*沒有被訪問的a標籤的樣式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*訪問事後的a標籤的樣式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠標懸停時a標籤的樣式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠標摁住的時候a標籤的樣式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

css3的選擇器nth-child()

/*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*選中當前指定的元素  數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示選中全部,這裏面必須是n, 從0開始的  0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色  隔行換色
             隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

僞元素選擇器

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

form表單簡單案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊百度帳號</title>
    <style>
        .reg{
            width: 400px;
            color: black;
            background-color: #0000cc;
        }
        a{
            text-decoration: none;
        }
        label[for='username']{
            color: yellow;
        }
    </style>
</head>
<body>
<!--    與服務器進行交互；HTTP協議；請求方式：get/post-->
    <form action="http://www.baidu.com" method="get" target="_blank">
<!--        表單控件-->
        <p class="user">
            <label for="username">用戶名：</label>
            <input type="text" name="username" placeholder="請輸入應戶名">
        </p>
        <p class="phoneNumber">
            <label for="phoneNumber">手機號：</label>
            <input type="number" name="phoneNumber" placeholder="可用於登陸和召回密碼">
        </p>
        <p class="pwd">
            <label for="pwd">密碼：</label>
            <input type="password" name="pwd" placeholder="請設置登陸密碼">
        </p>
        <p class="code">
            <label for="code">驗證碼</label>
            <input type="number" name="code" placeholder="請輸入驗證碼">
            <input type="submit" value="獲取短信驗證碼">
        </p>
        <p>
            首次註冊：<input type="radio" name="time" value="first" checked>
            已有帳號：<input type="radio" name="time" value="nofirst">
        </p>
        <p>
            <input type="checkbox" name="love" value="eat">閱讀並接受
            <a href="">《百度用戶協議》</a>
            及
            <a href="">《百度隱私權保護聲明》</a>　　　　 </p>
        <p class="register">
            <input class="reg" type="submit" value="註冊" width="400px">
            <input type="reset">
        </p>
        <p>
            <a href="">如需幫助，請點擊人工客服</a>
        </p>
    </form>
</body>
</html>