欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3之UI元素狀態(tài)偽類選擇器實例演示

  發(fā)布時間：2017-08-11 14:54:41   作者：打不死滴小強   我要評論
這篇文章主要介紹了css3之UI元素狀態(tài)偽類選擇器 ,其中包括hover、active和focus,enabled,disabledread-only與read-write 等等,需要的朋友可以參考下

所謂UI選擇器：就是指定的樣式只有當元素處于某種狀態(tài)下時，才起作用，在默認狀態(tài)下不起作用！

瀏覽器兼容性：

E:hover                 支持firefox、safari、Opera、ie8、chrome            ------------
E:active                 支持firefox、safari、Opera、chrome                      不支持ie8
E:focus                 支持firefox、safari、Opera、ie8、chrome            -------------
E:enabled             支持firefox、safari、Opera、chrome                    不支持ie8
E:disabled            支持firefox、safari、Opera、chrome                    不支持ie8
E:read-only          支持firefox、Opera                             不支持ie8、safari、chrome
E:read-write         支持firefox、Opera                             不支持ie8、safari、chrome
E:checked           支持firefox、safari、Opera、chrome                    不支持ie8
E::selection           支持firefox、safari、Opera、chrome                  不支持ie8
E:default              只支持firefox                                                          ------------
E:indeterminate    只支持chrome                                                      ------------
E:invalid               支持firefox、safari、Opera、chrome                 不支持ie8
E:valid                  支持firefox、safari、Opera、chrome                  不支持ie8
E:required            支持firefox、safari、Opera、chrome                  不支持ie8
E:optional             支持firefox、safari、Opera、chrome                 不支持ie8
E:in-range            支持firefox、safari、Opera、chrome                 不支持ie8
E:out-of-rang        支持firefox、safari、Opera、chrome                 不支持ie8
下面就其使用做詳細的說明;

1、選擇器E:hover、E:active和E:focus
  1)、E:hover選擇器被用來指定當鼠標指針移動到元素上時元素所使用的樣式
 使用方法：
 <元素>:hover{
 CSS樣式
 }
 我們可以在“<元素>”中添加元素的type屬性。
 例：
 input[type="text"]:hover{
 CSS樣式
 }
 2)、E:active選擇器被用來指定元素被激活時使用的樣式
 3)、E:focus選擇器被用來指定元素獲得光標聚焦點使用的樣式，主要是在文本框控件獲得聚焦點并進行文字輸入時使用。

例如：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>選擇器E:hover、E:active和E:focus</title>  
    <style>  
        input[type="text"]:hover{  
            background: green;  
        }  
        input[type="text"]:focus{  
            background: #ff6600;  
            color: #fff;  
        }  
        input[type="text"]:active{  
            background: blue;  
        }  
        input[type="password"]:hover{  
            background: red;  
        }  
    </style>  
</head>  
<body>  
<h1>選擇器E:hover、E:active和E:focus</h1>  
<form>  
    姓名：<input type="text" placeholder="請輸入姓名">  
    <br/>  
    <br/>  
    密碼：<input type="password" placeholder="請輸入密碼">  
</form>  
</body>  
</html>

2、E:enabled偽類選擇器與E:disabled偽類選擇器
 1)、E:enabled選擇器被用來指定當元素處于可用狀態(tài)時的樣式。
 2)、E:disabled選擇器被用來指定當元素處于不可用狀態(tài)時的樣式。
 

例如：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>E:enabled偽類選擇器與E:disabled偽類選擇器</title>  
    <style>  
        input[type="text"]:enabled{  
            background: green;  
            color: #ffffff;  
        }  
        input[type="text"]:disabled{  
            background: #727272;  
        }  
    </style>  
</head>  
<body>  
<h1>E:enabled偽類選擇器與E:disabled偽類選擇器</h1>  
<form>  
    姓名：<input type="text" placeholder="請輸入姓名" disabled>  
    <br/>  
    <br/>  
    學(xué)校：<input type="text" placeholder="請輸入學(xué)校">  
</form>  
</body>  
</html>

3、E:read-only偽類選擇器與E:read-write偽類選擇器
 1)、E:read-only選擇器被用來指定當元素處于只讀狀態(tài)時的樣式。
 2)、E:read-write選擇器被用來指定當元素處于非只讀狀態(tài)時的樣式。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>read-only偽類選擇器與E:read-write偽類選擇器</title>  
    <style>  
        input[type="text"]:read-only{  
            background: #000;  
            color: green;  
        }  
        input[type="text"]:read-write{  
            color: #ff6600;  
        }  
    </style>  
</head>  
<body>  
<h1>read-only偽類選擇器與E:read-write偽類選擇器</h1>  
<form>  
    姓名：<input type="text" placeholder="請輸入姓名" value="winson" readonly>  
    <br/>  
    <br/>  
    學(xué)校：<input type="text" placeholder="請輸入學(xué)校">  
</form>  
</body>  
</html>

4、偽類選擇器E:checked、E:default和indeterminate
  1)、E:cehcked偽類選擇器用來指定當表單中的radio單選框或者是checkbox復(fù)選框處于選取狀態(tài)時的樣式。
  2)、E:default選擇器用來指定當頁面打開時默認處于選取狀態(tài)的單選框或復(fù)選框的控件的樣式。
  3)、E:indeterminate選擇器用來指定當頁面打開時，一組單選框中沒有任何一個單選框被設(shè)定為選中狀態(tài)時，整組單選框的樣式。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>checked偽類選擇器</title>  
    <style>  
        input[type="checkbox"]:checked{  
            outline: 2px solid green;  
        }  
    </style>  
</head>  
<body>  
<h1>checked偽類選擇器</h1>  
<form>  
    房屋狀態(tài)：  
    <input type="checkbox">水  
    <input type="checkbox">電  
    <input type="checkbox">天然氣  
    <input type="checkbox">寬帶  
</form>  
</body>  
</html>

 默認的選擇項

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>default偽類選擇器</title>  
    <style>  
        input[type="checkbox"]:default{  
            outline: 2px solid green;  
        }  
    </style>  
</head>  
<body>  
<h1>default偽類選擇器</h1>  
<form>  
    房屋狀態(tài)：  
    <input type="checkbox" checked>水  
    <input type="checkbox">電  
    <input type="checkbox">天然氣  
    <input type="checkbox">寬帶  
</form>  
</body>  
</html>  


<h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate偽類選擇器</h1><!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>indeterminate偽類選擇器</title>  
    <style>  
        input[type="radio"]:indeterminate{  
            outline: 2px solid green;  
        }  
    </style>  
</head>  
<body>  
<h1>indeterminate偽類選擇器</h1>  
<form>  
    性別：  
    <input type="radio">男  
    <input type="radio">女  
</form>  
</body>  
</html>

5、偽類選擇器E::selection
 1)、E:selection偽類選擇器用來指定當元素處于選中狀態(tài)時的樣式。 

例如

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>偽類選擇器E::selection</title>  
    <style>  
        ::selection{  
            background: green;  
            color: #ffffff;  
        }  
        input[type="text"]::selection{  
            background: #ff6600;  
            color: #ffffff;  
        }  
    </style>  
</head>  
<body>  
<h1>偽類選擇器E::selection</h1>  
<p>今天，開發(fā)搜索框，出現(xiàn)了bug，現(xiàn)在沒有找到原因！今天，開發(fā)搜索框，出現(xiàn)了bug，現(xiàn)在沒有找到原因！今天，開發(fā)搜索框，出現(xiàn)了bug，現(xiàn)在沒有找到原因！今天，開發(fā)搜索框，出現(xiàn)了bug，現(xiàn)在沒有找到原因！今天，開發(fā)搜索框，出現(xiàn)了bug，現(xiàn)在沒有找到原因！</p>  
<input type="text" placeholder="文本">  
</body>  
</html>

6、E:invalid偽類選擇器與E:valid偽類選擇器
 1)、E:invalid偽類選擇器用來指定，當元素內(nèi)容不能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內(nèi)容不符合元素規(guī)定的格式時的樣式。
 2)、E:valid偽類選擇器用來指定，當元素內(nèi)容能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內(nèi)容符合元素規(guī)定的格式時的樣式。 

例如

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>E:invalid偽類選擇器與E:valid偽類選擇器</title>  
    <style>  
        input[type="email"]:invalid{  
            color: red;  
        }  
        input[type="email"]:valid{  
            color: green;  
        }  
    </style>  
</head>  
<body>  
<h1>E:invalid偽類選擇器與E:valid偽類選擇器</h1>  
<form>  
    <input type="email" placeholder="請輸入郵箱">  
</form>  
</body>  
</html>

7、E:required偽類選擇器與E:optional偽類選擇器
 1)、E:required偽類選擇器用來指定允許使用required屬性，而且已經(jīng)指定了required屬性的input元素、select元素以及textarea元素的樣式。
 2)、E:optional偽類選擇器用來指定允許使用required屬性，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>E:required偽類選擇器與E:optional偽類選擇器</title>  
    <style>  
    input[type="text"]:required{  
        background: red;  
        color: #ffffff;  
    }  
        input[type="text"]:optional{  
            background: green;  
            color: #ffffff;  
        }  
    </style>  
</head>  
<body>  
<h1>E:required偽類選擇器與E:optional偽類選擇器</h1>  
<form>  
    姓名：<input type="text" placeholder="請輸入姓名" required>  
    <br/>  
    <br/>  
    學(xué)校：<input type="text" placeholder="請輸入學(xué)校">  
</form>  
</body>  
</html>

8、E:in-range偽類選擇器與E:out-of-range偽類選擇器
 1)、E:in-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內(nèi)，且實際的輸入值在該范圍之內(nèi)時的樣式。
 2)、E:out-of-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內(nèi)，但實際輸入值在超過時使用的樣式。 

例如

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>E:in-range偽類選擇器與E:out-of-range偽類選擇器</title>  
    <style>  
        input[type="number"]:in-range{  
            color: #ffffff;  
            background: green;  
  
        }  
        input[type="number"]:out-of-range{  
            background: red;  
            color: #ffffff;  
        }  
    </style>  
</head>  
<body>  
<h1>E:in-range偽類選擇器與E:out-of-range偽類選擇器</h1>  
<input type="number" min="0" max="100" value="0">  
</body>  
</html> 

好了以上就是小編為大家整理的css3之UI元素狀態(tài)偽類選擇器實例演示全部內(nèi)容啦，希望大家繼續(xù)支持腳本之家~ 

 

相關(guān)文章

  • css3的focus-within選擇器的使用

    這篇文章主要介紹了css3的focus-within選擇器的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-05-11

  • 詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

    這篇文章主要介紹了詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面
    2020-01-06

  • CSS3 新增選擇器的實例

    這篇文章主要介紹了CSS3 新增選擇器的實例,需要的朋友可以參考下
    2019-11-13

  • css3 偽類選擇器快速復(fù)習(xí)小結(jié)

    如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ)，本文介紹了css3 偽類選擇器快速復(fù)習(xí)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工
    2019-09-10

  • CSS3 :default偽類選擇器使用簡介

    CSS3 :default 偽類選擇器只能作用在表單元素上，表示默認狀態(tài)的表單元素。接下來通過本文給大家介紹CSS3 :default偽類選擇器使用簡介，感興趣的朋友跟隨腳本之家小編一起
    2018-03-15

  • CSS3選擇器新增問題的實現(xiàn)

    這篇文章主要介紹了CSS3選擇器新增問題的實現(xiàn),本文給大家介紹的非常詳細對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-21

最新評論