请选择 进入手机版 | 继续访问电脑版
网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 916|回复: 0

【HTML5:第六章 初识CSS】6-16 伪类选择器(3)

[复制链接]

343

主题

344

帖子

1425

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1425
发表于 2021-12-2 09:39:37 | 显示全部楼层 |阅读模式
1选择器E:linkE:hoverE:activeE:focus
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器E:hoverE:activeE:focus</title>
    <style>
            a:link{color:greenyellow;}
                a:visited{color: gray;}
        input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: red;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: yellow;
        }
    </style>
</head>
<body>
<h3>选择器E:hoverE:activeE:focus</h3>
<form>
    姓名:<input type="text" placeholder="请输入姓名">
    <br/>
    <br/>
    密码:<input type="password" placeholder="请输入密码">
</form>
<a href="##">点击看看</a>
</body>
</html>
2E:enabled伪类选择器与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选择器被用来指定当元素处于非只读状态时的样式。
<!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:checkedE:defaultindeterminate
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>
默认的选择项default
<!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>
indeterminate伪类选择器
<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>
6E: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>
7E:required伪类选择器与Eptional伪类选择器
1)E:required伪类选择器用来指定允许使用required属性,而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)Eptional伪类选择器用来指定允许使用required属性,而且未指定了required属性的input元素、select元素以及textarea元素的样式。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:required伪类选择器与Eptional伪类选择器</title>
    <style>
    input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]ptional{
            background: green;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:required伪类选择器与Eptional伪类选择器</h1>
<form>
    姓名:<input type="text" placeholder="请输入姓名" required>
    <br/>
    <br/>
    学校:<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
8E:in-range伪类选择器与Eut-of-range伪类选择器
1)E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,且实际的输入值在该范围之内时的样式。
2)Eut-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,但实际输入值在超过时使用的样式。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:in-range伪类选择器与Eut-of-range伪类选择器</title>
    <style>
        input[type="number"]:in-range{
            color: #ffffff;
            background: green;
        }
        input[type="number"]ut-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与Eut-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2024-3-28 23:52 , Processed in 0.064086 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表