js学习-UI元素状态伪类选择器下_typeerror:e.selection-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48235555/article/details/106500649

5、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>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<input type="text" placeholder="文本">
</body>
</html>

6、E:invalid, E:valid

E:invalid 适用于符合规定的
E:valid 适用于不符合规定的

<!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

<!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

in-range：限定范围
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="1">  <!--不可以输入中文字，但是可以输入英文-->
</body>
</html>

9、通用兄弟元素选择器

用来指定定位给于同一父元素之中的某个元素之后的所有其他兄弟元素
使用方法：
<子元素> ~ <子元素之后的同级兄弟元素>{
CSS样式
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span~p{
            background: green;
        }
    </style>
</head>
<body>
<div>
    <span>123465164</span>
    <span>123465164</span>
    <p>当今时代刷卡接电话啊睡觉看得见</p>
    <p>当今时代刷卡接电话啊睡觉看得见</p>
    <p>当今时代刷卡接电话啊睡觉看得见</p>
</div>

<span>123465164</span>
<p>当今时代刷卡接电话啊睡觉看得见</p>
<p>当今时代刷卡接电话啊睡觉看得见</p>
<p>当今时代刷卡接电话啊睡觉看得见</p>
<p>当今时代刷卡接电话啊睡觉看得见</p>

<div>
    <span>gggggggggggggggggggg</span>
    <div>
        <p>当今时代刷卡接电话啊睡觉看得见</p>
        <p>当今时代刷卡接电话啊睡觉看得见</p>
        <p>当今时代刷卡接电话啊睡觉看得见</p>
    </div>
</div>

<p>当今时代刷卡接电话啊睡觉看得见</p>
<p>当今时代刷卡接电话啊睡觉看得见</p>

</body>
</html>