一些新的伪选择器

Posted 2020-10-14 Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一些新的伪选择器相关的知识，希望对你有一定的参考价值。

作为一些还未被浏览器完全支持的伪选择器，作为渐进增强还是不错的。

placeholder-show：placeholder显示出来的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>placeholder-shown</title>
    <style>
        form{
            position: relative;
            padding-top: 30px;
        }
        label{
            position: absolute;
            top: 0;
            left: 0;
            font-size: var(--font-size-small);
            opacity: 1;
            transform: translateY(0);
            transition: .2s;
        }
        input:placeholder-shown + label{
            opacity: 0;
            transform: translateY(1em);
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text">
        <label for="">enter some text</label>
    </form>
</body>
</html>

required：必填的输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>required</title>
    <style>
        span{
            opacity: 0
        }
        input:required + span{
            opacity: 1
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" required>
        <span>required</span><br>

        <input type="text" name="" id="" placeholder="Enter some text">
        <span>required</span>
    </form>
</body>
</html>

disabled：禁止输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>disabled</title>
    <style>
        span{
            opacity: 0
        }
        input:disabled{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" disabled>
    </form>
</body>
</html>

read-only：只读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>read-only</title>
    <style>
        span{
            opacity: 0
        }
        input:read-only{
            background-color: var(--gray-lighter);
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="" id="" placeholder="Enter some text" readonly>
    </form>
</body>
</html>

out-of-range：number类型的输入框超过了限定值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>out-of-range</title>
    <style>
        span{
            opacity: 0
        }
        input:out-of-range + span{
            opacity: 1
        }
    </style>
</head>
<body>
    <form action="">
        <input type="number" name="" id="" placeholder="Enter some text" min="0" max="10">
        <span>out of range</span>
    </form>
</body>
</html>

以上是关于一些新的伪选择器的主要内容，如果未能解决你的问题，请参考以下文章

用于在另一个元素内插入图标的伪元素选择器

html的伪类选择器

Yarn: 一个新的JavaScript模块管理器

Firefox，查询选择器和可见的伪选择器

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器