這篇文章將為大家詳細(xì)講解有關(guān)css3偽類選擇器enabled的使用方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元晉中做網(wǎng)站,已為上家服務(wù),為晉中各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

:enabled 選擇器匹配每個(gè)啟用的的元素（主要用于表單元素）。:enabled 選擇器不匹配任何無法禁用的元素。

問題：

1、實(shí)現(xiàn)以下表單，且使用純DIV+CSS，必須使用選擇器—enabled

附加說明：

1、年齡，身份證，手機(jī)號(hào)，均是可以輸入的，但是地址輸入框不可以輸入，默認(rèn)就是湖南

2、整體寬度380,上下左右padding為20，整體居中顯示

3、頭像圖標(biāo)寬為40，其他圖標(biāo)大小也是40

現(xiàn)在來具體操作

1、準(zhǔn)備素材：根據(jù)目標(biāo)得知，看到的圖標(biāo)都是要切的素材

2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、目標(biāo)分為一個(gè)標(biāo)題+一個(gè)表單

2、表單我們可以通過ul來布局，且li里的圖標(biāo)我們將他們作為背景這樣可以很簡單的讓圖標(biāo)在li內(nèi)垂直居中，且居左

好，先按照分析，寫好思路，暫時(shí)不管css的實(shí)現(xiàn)

    
    


    

        

            請完善信息
        
        

            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                    
                
            
        
    

3、寫樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫了，以下是分析思路

思路分析：

.container * 公共樣式

1、寫了這么多案例，這一步基本上是必不可少的，也是為了減少代碼冗余性，所以在這里我們可以定義公共的樣式

所以index.css中添加代碼如下：

.container *{
    padding:0;
    margin:0;
}

.container 外層容器

1、根據(jù)附加說明得知，寬380px,居中顯示，所以需要margin:0 auto,上下左右均有間距

所以index.css中添加代碼如下：

.container{
    width:380px;
    margin:0 auto;
    padding:20px;
}

form 表單

1、根據(jù)目標(biāo)得知，它有一個(gè)灰色邊框

所以index.css中添加代碼如下：

form{
    border:1px solid lightgray;
}

.avatar  .avatar img 頭像

1、頭像要居中，且上下也存在padding

2、頭像圖片寬度為40，且?guī)A形邊框，上下左右均有padding

所以index.css中添加代碼如下：

.avatar{
    text-align: center;
    padding:10px 0!important;
}
.avatar img{
    width: 40px;
    border: 1px solid gray;
    border-radius: 40px;
    padding: 10px;
}

ul li

1、li不帶黑色圓點(diǎn)，所以無樣式

所以index.css中添加代碼如下：

ul li{
    list-style: none;
}

.item li的公共樣式設(shè)置

1、左邊因?yàn)橛斜尘皥D標(biāo)，所以需要padding-left,高度60，為了讓他居中，所以line-height也要設(shè)置成一樣

2、背景圖標(biāo)大小40，且水平方向上居左，垂直方向上居中

3、背景圖標(biāo)不重復(fù)

所以index.css中添加代碼如下：

.item{
    padding-left: 50px;
    height: 60px;
    line-height: 60px;
    background-size: 40px;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
}

li的背景圖標(biāo)設(shè)置

1、為每個(gè)li設(shè)置自己的背景圖片

所以index.css中添加代碼如下：

.age{
    background-image: url(../images/age.png);
}
.sfz{
    background-image: url(../images/sfz.png);
}
.sj{
    background-image: url(../images/sj.png);
}
.addr{
    background-image: url(../images/addr2.png);
}

text類型輸入框 公共樣式設(shè)置

1、寬度為300,高30，存在上間距

所以index.css中添加代碼如下：

input[type="text"]{
    width:300px;
    height:30px;
    margin-top: 10px!important;

}

可編輯的輸入框設(shè)置

1、這里我們可以使用enabled知識(shí)點(diǎn)來設(shè)置了，input[type="text"]:enabled來匹配，然后帶2個(gè)像素的灰色左邊邊框，且背景色為淺綠

所以index.css中添加代碼如下：

input[type="text"]:enabled {
    border-left:2px solid lightgray;
    background-color:lightgreen;
}

按鈕設(shè)置

1、寬度為150px，高40px

所以index.css中添加代碼如下：

input[type="button"]{
    width:150px;
    height:40px;
}

h3 標(biāo)題設(shè)置

1、標(biāo)題要居中，且上下存在padding

所以index.css中添加代碼如下：

h3{
    text-align:center;
    padding:10px 0!important;
}

好，到目前為止，我們把想到的樣式全部寫好了，具體不對，我們再來修改

目前為止，css所有內(nèi)容如下：

.container *{
    padding:0;
    margin:0;
}
.container{
    width:380px;
    margin:0 auto;
    padding:20px;
}
form{
    border:1px solid lightgray;
}
.avatar{
    text-align: center;
    padding:10px 0!important;
}
.avatar img{
    width: 40px;
    border: 1px solid gray;
    border-radius: 40px;
    padding: 10px;
}
ul li{
    list-style: none;
}

.item{
    padding-left: 50px;
    height: 60px;
    line-height: 60px;
    background-size: 40px;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
}
.age{
    background-image: url(../images/age.png);
}
.sfz{
    background-image: url(../images/sfz.png);
}
.sj{
    background-image: url(../images/sj.png);
}
.addr{
    background-image: url(../images/addr2.png);
}
input[type="text"]{
    width:300px;
    height:30px;
    margin-top: 10px!important;

}
input[type="text"]:enabled {
    border-left:2px solid lightgray;
    background-color:lightgreen;
}
input[type="button"]{
    width:150px;
    height:40px;
}
h3{
    text-align:center;
    padding:10px 0!important;
}

將css加入html中

    
    
    



    

        

            請完善信息
        
        

            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                    
                
            
        
    

運(yùn)行結(jié)果如下：

仔細(xì)觀察，發(fā)現(xiàn)Ul沒有居中，所以還要對ul設(shè)置一下

把以下代碼加入css中

分析：

1、因?yàn)閘i有50的左padding,然后每個(gè)文本框都有邊框，且有自己的寬度，所以寬度355，要居中，所以需要margin

ul{
    width: 355px;
    margin: 0 auto!important;
}

運(yùn)行效果如下：

關(guān)于css3偽類選擇器enabled的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。