css3之UI元素狀態(tài)偽類選擇器實例演示
我要評論所謂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/>
學校：<input type="text" placeholder="請輸入學校">
</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/>
學校：<input type="text" placeholder="請輸入學校">
</form>
</body>
</html>
4、偽類選擇器E:checked、E:default和indeterminate
1)、E:cehcked偽類選擇器用來指定當表單中的radio單選框或者是checkbox復選框處于選取狀態(tài)時的樣式。
2)、E:default選擇器用來指定當頁面打開時默認處于選取狀態(tài)的單選框或復選框的控件的樣式。
3)、E:indeterminate選擇器用來指定當頁面打開時，一組單選框中沒有任何一個單選框被設定為選中狀態(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/>
學校：<input type="text" placeholder="請輸入學校">
</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ù)支持腳本之家~
相關文章
這篇文章主要介紹了css3的focus-within選擇器的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2020-05-11
詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器
這篇文章主要介紹了詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面2020-01-06- 這篇文章主要介紹了CSS3 新增選擇器的實例,需要的朋友可以參考下2019-11-13
如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎中的基礎，本文介紹了css3 偽類選擇器快速復習，文中通過示例代碼介紹的非常詳細，對大家的學習或者工2019-09-10
CSS3 :default 偽類選擇器只能作用在表單元素上，表示默認狀態(tài)的表單元素。接下來通過本文給大家介紹CSS3 :default偽類選擇器使用簡介，感興趣的朋友跟隨腳本之家小編一起2018-03-15
這篇文章主要介紹了CSS3選擇器新增問題的實現(xiàn),本文給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-21
