css3中UI元素狀態偽類選擇器實例詳解-css教學-PHP中文網

這篇文章主要介紹了css3之UI元素狀態偽類選擇器,其中包括hover、active和focus,enabled,disabledread-only與read-write 等等,需要的朋友可以參考下

#所謂UI選擇器：就是指定的樣式只有當元素處於某種狀態時，才會起作用，在預設狀態下不起作用！

瀏覽器相容性：

E:hover                 支援firefox、safari、Opera、ie8、1        支援firefox 1oari、Opera、chrome                      不支援ie8
E:focus              -------------
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
E::selection          default                                               ------------
E:indeterminate                                ------------
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            支援  E:out-of-rang        支援firefox、safari、Opera、chrome                且未使用ie8

##11其使用做詳細的說明;

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選擇器被用來指定當元素處於可用狀態時的樣式。
2)、E:disabled選擇器被用來指定當元素處於不可用狀態時的樣式。

例如：

<!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/>  
    学校：<input type="text" placeholder="请输入学校">  
</form>  
</body>  
</html>

登入後複製

3、E:read-only偽類別選擇器與E:read-write偽類別選擇器
1)、E:read-only選擇器被用來指定當元素處於唯讀狀態時的樣式。
2)、E:read-write選擇器被用來指定當元素處於非唯讀狀態時的樣式。

<!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/>  
    学校：<input type="text" placeholder="请输入学校">  
</form>  
</body>  
</html>

登入後複製

4、偽類選擇器E:checked、E:default和indeterminate
1)、E :cehcked偽類選擇器用來指定當表單中的radio單選框或是checkbox複選框處於選取狀態時的樣式。
2)、E:default選擇器用來指定當頁面開啟時預設處於選取狀態的單選方塊或複選框的控制項的樣式。
3)、E:indeterminate選擇器用來指定當頁面開啟時，一組單選框中沒有任何一個單選框被設定為選取狀態時，整組單選框的樣式。

<!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>  
    房屋状态：  
    <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>  
    房屋状态：  
    <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偽類別選擇器用來指定當元素處於選取狀態時的樣式。

例如

<!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>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>  
<input type="text" placeholder="文本">  
</body>  
</html>

登入後複製

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

例如

<!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屬性，而且已經指定了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/>  
    学校：<input type="text" placeholder="请输入学校">  
</form>  
</body>  
</html>

登入後複製

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

例如

<!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元素狀態偽類選擇器實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！